4

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

该网站看起来很棒，<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) {}

4

2 回答 2

3

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

像这样使用元标记

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

"width=device-width" 告诉你视口的宽度是由设备的宽度决定的

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

例如：@media 屏幕和（最大设备宽度：（您想要的）像素）{}

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

于 2016-01-28T04:48:28.497 回答
0

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

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

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

于 2013-09-18T15:41:25.697 回答