viewport user-scalable=yes和媒体查询

Question

我接管了一个网站的建设，这个网站根本不是设计在移动设备上的。客户端至少需要能够通过移动设备浏览网站，所以我正在努力使网站在移动设备上显示与在浏览器上完全相同，并让客户端在整个网站上进行收缩和缩放。我不得不通过媒体查询做一些小调整，但那是另一回事了。

这个网站在<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) {}

Answer 1

兄弟，试试这个吧。据我所知，我正在解释，但我有足够的信心，它可能会对你有所帮助

使用meta标签，如下所示

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

" width =device- width“表示视区的宽度由设备的宽度决定

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

例如：@media screen和(max-device-width：(您需要的) px){}

尝试将给定值更改为initial-scale:范围为0.0-1.0；

Answer 2

嗨，我认为这是一个关于width=device-width的误解使用它的原因是为了使您的网站响应，但您正在谈论的只是一个标准的网站，您为什么不尝试以下

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

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