CSS 对移动浏览器缩放的反应

Question

我的印象是，vh 和vw 单元处理移动浏览器放大，但显然情况并非如此，我想我开始明白为什么了。放大根本不会改变视口，而只是向用户显示视口的一部分，尽管名称为视口。基本上，您可以看到的内容与视口之间存在差异。我不知道区分这两者是否真的有意义，但似乎就是这样。

问题是：我如何在样式表中“做出反应”以缩放更改？

例如，我有一些具有宽度的 html 元素，它适合手机屏幕。现在用户放大（做两个手指的手势，将手指移开）。元素的大小应该相对于用户看到的内容保持不变，但文本应该变大，因为这可能是用户放大的原因。也许他们之前无法阅读或希望链接更大，以便他们可以更轻松地点击它。

我该怎么做？

我已经阅读了有关 @viewport 的内容，但它还没有得到真正的支持，并且还提出了一个问题，即何时使用哪种视口大小，如何使它像使用 vh 和 vw 时一样流畅一个桌面浏览器？简单地限制“宽度达到这么多像素”是行不通的。定义一个数学函数来计算元素相对于可见内容的大小变化程度以及文本大小变化的程度会很好，但可能无法做到。

Answer 1

在移动设备上，text-size-adjust 属性允许 Web 作者控制是否以及如何将文本膨胀算法应用于其所应用元素的文本内容。

由于此属性是非标准的，因此必须使用前缀：-moz-text-size-adjust、-webkit-text-size-adjust 和 -ms-text-size-adjust。

智能手机上的浏览器显示网页的算法与桌面计算机上浏览器渲染网页的算法不同。他们不是在设备屏幕的宽度上布置网页，而是使用比设备屏幕宽得多的视口来布置网页，通常为 800 或 1000 像素宽。使用两种可能的方法之一来映射回原始设备坐标：然后使用较小的窗口在设备屏幕上仅显示实际渲染的部分内容，或者将视口拉伸到设备的大小。

虽然它是高度实验性的