CSS对手机浏览器进行缩放zoom

问题描述:

我当时的印象是,单元vhvw涉及手机浏览器放大,但显然情况并非如此,我想我已经开始明白为什么了。放大根本不会更改视口,但仅向用户显示视口的一部分,而不管名称视口。基本上,你可以看到的和视口有区别。我不知道区分这两者是否真的有意义,但这就是它的样子。CSS对手机浏览器进行缩放zoom

问题是:我的样式表中还有什么“反应”来缩放变化?

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

我该怎么做这样的事情?

我读过有关@viewport的东西,但它不是真正支持还,也引出了一个问题,当要使用的视口的大小,如何使它流利,当您在浏览器destop使用vhvw?简单的限制“高达如此宽的像素”不会这样做。定义一个数学函数来确定元素的大小相对于可以看到的大小的变化以及文本大小的变化会很大,但可能无法达到。

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

由于此属性为非标准,因此必须使用前缀:-moz-text-size-adjust,-webkit-text-size-adjust-ms-text-size-adjust

智能手机上的浏览器不会使用与浏览器在台式机上呈现网页相同的算法显示网页。不是在设备屏幕的宽度上布置网页,而是使用比设备屏幕宽得多的视口(通常为800或1000像素宽)布置它。使用两种可能的方法之一来映射回原始设备坐标:然后使用较小的窗口仅在设备屏幕上显示实际渲染内容的一部分,或者视口被拉伸至设备的大小。

其高度的实验虽然

+0

是的,在http检查://caniuse.com#search=text-size-adjust确认其状态了实验性:/ – Zelphir