我的 iPhone 认为宽度为 980 像素

我正在尝试创建一组三个很简单媒体查询来处理各种屏幕尺寸。经过一番绞尽脑汁之后，我得出了以下结论：

@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 指向它时，它坚持显示中等尺寸的样式。玩弄数字，我发现仅当最大宽度为 980px 时，iPhone 才会响应该查询中的样式.

请注意，我在这些查询中使用“全部”来排除与是否编码“手持式”或“屏幕，手持式”等有关的任何内容。尝试简化以帮助我理解问题。

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

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

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

使用时media queries you need将此添加到您的head tag.

<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元素。