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

CSS对移动浏览器缩放的反应,css,responsive-design,viewport-units,Css,Responsive Design,Viewport Units,我的印象是,vh和vw处理移动浏览器放大的问题,但显然情况并非如此,我想我已经开始理解原因了。放大根本不会更改视口,而只会向用户显示视口的一部分,尽管名称为viewport。基本上,您可以看到的内容与视口之间存在差异。我不知道区分这两者是否真的有意义,但这似乎就是它的意义所在 问题是:我在样式表中如何“反应”缩放更改 例如,我有一个宽度为的html元素,它可以放在手机屏幕上。现在用户放大(做两个手指的手势,将手指彼此移开)。相对于用户看到的内容,元素的大小应该保持不变,但是文本应该变大,因为这可

我的印象是,
vh
vw
处理移动浏览器放大的问题,但显然情况并非如此,我想我已经开始理解原因了。放大根本不会更改视口,而只会向用户显示视口的一部分,尽管名称为viewport。基本上,您可以看到的内容与视口之间存在差异。我不知道区分这两者是否真的有意义,但这似乎就是它的意义所在

问题是:我在样式表中如何“反应”缩放更改

例如,我有一个宽度为的html元素,它可以放在手机屏幕上。现在用户放大(做两个手指的手势,将手指彼此移开)。相对于用户看到的内容,元素的大小应该保持不变,但是文本应该变大,因为这可能是用户放大的原因。也许他们以前看不懂,或者想要一个更大的链接,这样他们可以更容易地点击它

我怎么会做这样的事


我已经读过关于
@viewport
的东西,但它还没有真正得到支持,还提出了一个问题,什么时候使用哪个视口大小,如何使它像在destop浏览器上使用
vh
vw
一样流畅?简单地限制“高达某个或某个像素的宽度”是不行的。定义一个数学函数,用于计算元素相对于可见内容的大小变化量,以及文本大小变化量,这将是一件好事,但在移动设备上可能无法做到,
text size adjust
属性允许Web作者控制文本膨胀算法是否以及如何应用于它所应用到的元素的文本内容

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

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

虽然它是高度实验性的

是的,检查确认了它的实验状态:/