viewport user-scalable=yes 和媒体查询

Posted 2023-03-06

【中文标题】viewport user-scalable=yes 和媒体查询

【英文标题】：viewport user-scalable=yes and media queries

【发布时间】：2013-09-23 08:45:49

【问题描述】：

我接管了一个根本不适合在移动设备上使用的网站的构建。客户端至少需要能够通过移动设备浏览该站点，因此我正在尝试使该站点在移动设备上的显示与在浏览器上的显示完全相同，并且只是让客户端在整个过程中进行捏合和缩放它。我不得不通过媒体查询进行一些小的调整，但这是另一回事。

使用<meta name="viewport" content="user-scalable=yes" /> 使该网站看起来很棒，但看起来我的任何媒体查询都没有生效...当我将width=device-width 放入元标记中时，该网站爆炸了，看起来它显示在 300 ％ 飞涨。当我输入以下任何 initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 时，我得到的效果与我刚刚输入 width=device-width 时的效果相同

到目前为止，唯一让我接近我正在寻找的东西是 user-scalable=yes 单独在元标记中，没有别的，但媒体查询没有生效。媒体查询是否需要width=device-width 或initial-scale？

这是我正在使用的一个未生效的媒体查询：

@media only screen and (max-width: 879px)

【参考方案1】：

兄弟试试这个。 我正在根据我的知识进行解释，但有足够的信心可以帮助你

像这样使用元标记

ex:<meta name='viewport' content=' width=device-width, initial-scale=0.1, maximum-scale=1, user-scalable=1'  />

“宽度=设备宽度” 告诉您视口的宽度由设备的宽度占用

因此像这样为设备宽度编写媒体查询

ex:@media screen and (max-device-width:(your desired) px)

尝试将给定值更改为初始比例：范围从 0.0-1.0；

【参考方案2】：

您好，我认为这是对width=device-width 的误解，使用它的原因是为了使您的网站具有响应性，但您所说的只是一个标准网站，您为什么不尝试以下方法

<meta name="viewport" content="width=879">

这将导致手机/设备最初使用此宽度查看网站，您不需要任何进一步的视口声明就可以按照您想要的方式工作

【讨论】：

谢谢你，但我想我真正的问题是“媒体查询是否需要 width= 元标记才能生效？或者他们应该只使用 user-scalable=yes 吗？他们似乎没有只与user-scalable=yes一起工作

媒体查询有效地作用于页面的大小，因此通过强制页面缩放到设备的宽度，您可以有效地保持页面大小相同，这就是为什么您的媒体查询不起作用。使用特定的移动 CSS 可能会更好？