我的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的iphone才会响应该查询中的样式.

请注意,我在这些查询中使用"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元素,则非常有用.