CSS 对移动浏览器缩放使用react

Question

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

问题是:我还可以如何在样式表中对缩放更改做出“ react ”？

例如，我有一些 html 元素，其宽度适合手机屏幕。现在用户放大(做两个手指的手势，将手指彼此分开)。元素的大小应该与用户看到的保持一致，但文本应该变大，因为这可能是用户放大的原因。也许他们以前无法阅读它或者想要一个更大的链接，以便他们可以更轻松地点击它。

我怎么会做这样的事情？

我读过 @viewport东西，但它还没有得到真正的支持，也提出了一个问题，什么时候使用哪个视口(viewport)大小，如何让它像使用 vh 时一样流畅。和 vw在 destop 浏览器上？简单地限制“最多如此多的宽度 px”是行不通的。定义一个数学函数来确定元素大小相对于可见内容的变化幅度以及文本大小的变化幅度会很大，但可能无法实现。

Answer 1

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

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

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

虽然它具有高度的实验性