我的 iPhone 认为它是 980 像素宽

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 指向它时，它坚持显示中等大小的样式。玩弄这些数字，我发现只有最大宽度为 980 像素的 iphone 才会响应该查询中的样式。

请注意，我在这些查询中使用了“全部”来排除是否编写“手持”或“屏幕、手持”等代码。尝试简化以帮助我理解问题。

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

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

如果我使用桌面浏览器查看该页面，当我将窗口大小调整得越来越小时，它的行为与预期一致。但是 iPhone 会在任何指定的最大宽度低于 980 像素时报告我的“中等分辨率”消息。任何帮助表示赞赏，在此先感谢。

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 元素，这将非常有用。