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

Question

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

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

根据我的研究，不同大小的文本似乎有两个可能的原因：默认 CSS 的差异或渲染引擎的差异。由于我在 Chrome 的默认 CSS 或 Firefox 的默认 CSS 上找不到任何对像素大小文本的引用，因此我假设此设置来自渲染引擎。

我的 IP 是动态的，所以我无法提供一个实时示例，但这里是比较iPhone 的 Safari和桌面上的 Chrome 中的同一站点的屏幕。请注意文本大小的巨大差异。

有什么办法可以使这两个浏览器中的文本具有相同的相对大小？

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

我在 JavaScript 中找到了答案：

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

它根据 body 元素上的视口宽度设置文本大小。由于在 em 中设置的所有文本的大小都与它们的父元素相关，因此所有文本的大小都与 body 元素相匹配。

score 0 · Accepted Answer

你应该试试CSS Unitvw，像这样：

body { font-size: 1.5vw; }

但是，我不确定移动浏览器是否支持它...

编辑

在此处检查浏览器兼容性。