Layout 如何在iPhone'；中将文本设置为相同的相对大小；s Safari和任何桌面浏览器？

我想建立一个在所有屏幕宽度上看起来完全相同的网站，这意味着整个网站将根据屏幕的大小进行缩放，或者更准确地说，根据视口的宽度进行缩放

这对于SVG图像来说是相对容易的，我已经根据视口的宽度正确地缩放了所有图像。视口的宽度是所有图像缩放的参照点。然而，文本的参考点在任何桌面浏览器和iPhone的Safari（我假设任何移动浏览器）之间都是不同的

根据我的研究，不同大小的文本似乎有两个可能的原因：默认CSS的不同或渲染引擎的不同。因为我在Chrome的默认CSS或Firefox的默认CSS中找不到任何像素大小的文本引用，所以我假设这个设置来自渲染引擎

我的IP是动态的，所以我不能提供一个真实的例子，但这里是比较和中相同站点的屏幕。请注意文本大小的巨大差异

---

有什么方法可以使文本在这两种浏览器中具有相同的相对大小吗？

我在JavaScript中找到了答案：

onresize=onload=function(){
    document.body.style.fontSize=window.innerWidth/20+"px"
}

---

它根据主体元素上视口的宽度设置文本大小。由于em中的所有文本集的大小都是相对于其父元素的，因此所有文本的大小都是根据body元素正确调整的。

此外，如果您想通过使用rems避免级联地狱，并从1024倍的宽度尊重原始布局设计，您可以坚持以下原则：

onresize = onload = function(){
  document.querySelector("html").style.fontSize = ( innerWidth * 100 ) / 1024 + "%";
}

你应该这样尝试：

body { font-size: 1.5vw; }

但是，我不确定手机浏览器是否支持它

编辑 检查浏览器兼容性