元视口标签可复制桌面浏览器的缩放体验

时间:2019-06-26 22:59:12

标签: html css

我设置了一个网页,以便在桌面浏览器上进行缩放(使用ctrl +和ctrl-)时,元素将按预期方式响应。具体来说,我使用固定位置Div和VH和VW大小的元素来在屏幕上保持固定位置和大小,而另一个Img元素使用绝对位置。当我放大和缩小时,图像会越来越大,但是即使我在图像周围平移,控件Div也会保持相同的位置和大小。

但是,在移动设备上,我很难复制它。如果我使用

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">

然后,我可以在图像周围平移,并且Div控件将保持其应有的固定状态,但是我无法进行捏缩放。如果将用户可缩放比例更改为“是”,则可以捏缩放,但不再保持控件Div的固定位置和vh / vw大小。

我需要什么元视口标签,因此,如果我设置(例如)vw为50,则无论用户如何放大或缩小,vw总是占据视口宽度的一半。以及使固定元素保持固定在视口中的位置,如我所说的那样?

0 个答案:

没有答案