我接管了一个网站的构建，其中根本没有设计在移动设备上。客户端需要能够至少通过移动设备浏览网站，所以我试图使其成为移动设备上的网站与浏览器上显示的完全相同，只需让客户端在整个过程中捏合和缩放它。我不得不通过媒体查询做一些小调整，但这是另一个故事。
该网站在<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) {}
答案 0 :(得分：2)
兄弟试试这个。 我按照我的知识解释，但有足够的信心，它可以帮助你
使用像这样的元标记
ex:<meta name='viewport' content=' width=device-width, initial-scale=0.1, maximum-scale=1, user-scalable=1' />
＆＃34;宽度=设备宽度＆＃34; 告诉您视口的宽度取决于设备的宽度
因此像这样写入媒体查询设备宽度
ex：@media screen and（max-device-width :( your desired）px）{}
尝试将给定值更改为初始比例：范围为0.0-1.0;
答案 1 :(得分：0)
您好我认为这是一个误解width=device-width使用它的原因是为了让您的网站响应，但您所说的只是一个标准网站，为什么不尝试以下
<meta name="viewport" content="width=879">
这会导致手机/设备最初使用此宽度查看网站，您不需要任何进一步的视口声明就可以按照您想要的方式工作