视口 user-scalable=yes 和媒体查询

Question

我接手了一个网站的构建，但该网站根本没有设计为移动设备使用。客户需要能够通过移动设备浏览网站，因此我正在尝试使移动设备上的网站与浏览器上的网站完全相同，并让客户自行缩放。我必须通过媒体查询进行一些小的调整，但这是另一个故事。

在标签下，网站看起来很棒，但似乎我的任何媒体查询都没有生效。当我将width=device-width放入meta标签中时，网站会爆炸并显示为300％缩放。当我放置任何以下内容之一initial-scale=1.0，maximum-scale=1.0，minimum-scale=1.0时，我得到的效果与仅放置width=device-width时相同。

到目前为止，唯一给我接近所需效果的是仅在meta标签中放置user-scalable=yes，而没有其他内容，但媒体查询并没有生效。是否需要在媒体查询中使用width=device-width或initial-scale？

这里是我正在使用但未生效的媒体查询：@media only screen and (max-width: 879px) {}

- Ty Bailey

Answer 1

兄弟，试试这个方法。根据我的经验解释一下，但我很有信心它能帮到你。

像这样使用标签：

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

"width=device-width" 表示你的视口宽度将由设备的宽度决定。

因此，要为设备宽度编写媒体查询，请按以下方式进行：

例如：@media screen and (max-device-width:(你所需的) px){}

尝试改变给定值来设置 initial-scale：范围从 0.0-1.0；

- chaitanya chan

Answer 2

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

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

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

- Chris Warnes

---

谢谢您的回复，但我想问的是：“媒体查询是否需要width=元标记才能生效？还是只需要user-scalable=yes就可以工作？似乎只有user-scalable=yes并不能使其生效。” - Ty Bailey

媒体查询有效地作用于页面尺寸，因此通过强制页面缩放到设备宽度，您实际上保持了页面尺寸不变，这就是为什么您的媒体查询无效的原因。您可能最好使用针对移动设备的特定CSS。 - Chris Warnes