css - 我的 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 指向它时，它坚持显示中等尺寸的样式。研究这些数字，我发现只有最大宽度为 980px 时，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 就很有用元素。