我的iPhone认为它的宽度为980px

Question

我正在尝试创建一组三个非常简单的媒体查询来处理各种屏幕尺寸。这是我想出来的，经过一系列的挑战：

@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时，它坚持显示中等大小的syles。使用这些数字，我发现只有最大宽度为980px的才会对该查询中的样式做出响应。

请注意，我在这些查询中使用“all”来排除与是否编写“掌上电脑”或“屏幕，手持设备”等相关的任何问题。尝试简化以帮助我理解问题。

我认为它可能与我正在开发的页面内容有关，所以我创建了一个无内容的测试页面来试图确定问题。它在：

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

如果我使用桌面浏览器查看该页面，当我调整窗口大小时，它会按预期运行。但iPhone会以980px以下的任何指定最大宽度报告我的“中等分辨率”消息。任何帮助表示感谢，提前谢谢。

Answer 1

使用media queries时，需要将其添加到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个元素，则会很有用。