我的iPhone认为它的宽度是980像素。

Question

我的iPhone认为它的宽度是980像素。

cssiphonewidthmedia-queriesmobile-devices

19

我正在尝试创建一组三个非常简单的媒体查询来处理一系列屏幕尺寸。在经过一番苦思冥想后，我想出了以下内容:

@media all and (min-width: 0px) and (max-width: 480px)  { styles here }  
@media all and (min-width: 481px) and (max-width: 1023px)   {  styles here } 
@media all and (min-width: 1024px) {  styles here }

在浏览器中，这个网页的效果符合我的预期。但是当我用iPhone指向它时，它仍坚持使用中等大小的样式。经过一番尝试，我发现只有在max-width为980px时，iphone才响应该查询内的样式。

请注意，我在这些查询中使用了"all"以排除与是否编码"handheld"或"screen，handheld"等有关的任何问题。这是我尝试简化以帮助自己理解问题。

我认为可能与我正在开发的页面内容有关，因此我创建了一个没有内容的测试页面来试图确定问题。它在以下网址中：

http://rgdaniel.com/test-mediaquery.php

如果我用桌面浏览器查看该页面，在调整窗口大小时表现如预期。但是iPhone会在任何指定的max-width小于980px时报告我的“medium res”消息。感谢您的任何帮助，提前致谢。

- rgdaniel

如果你的目标是移动设备，可以参考http://stephen.io/mediaqueries/。 - Aram Kocharyan

是的，我曾经在某个时候完全按照 stephen.io 上编码的那些查询使用过它们，但无法使事情正常运行... - rgdaniel

1

你有包含这个吗，<meta name="viewport" content="width=device-width, initial-scale=1.0">？我在你提供的链接中没有看到它，如果你没有包含它，你需要在你的 head 标签中加入它。 - Josh Powell

没问题，如果有帮助的话，我会将其添加为答案。这样可以让网站知道它正在设备上使用，而不是桌面上使用。第一次使用媒体查询对我来说带来了很多头痛，直到我发现我忘记了其中一个重要部分。 - Josh Powell

哈利路亚，这就是诀窍！谢谢你！！ - rgdaniel

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Powell · Accepted Answer

使用媒体查询时，您需要将以下代码添加到head标签中：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这使网站能够检测到它正在设备上使用。

您也可以这样做：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

这部分代码user-scalable=0; 防止用户使用手指缩放，并且在您有position: fixed元素时非常有用。