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

时间:2013-11-13 04:57:38

标签: css iphone width media-queries mobile-devices

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

@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以下的任何指定最大宽度报告我的“中等分辨率”消息。任何帮助表示感谢,提前谢谢。

1 个答案:

答案 0 :(得分:38)

使用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个元素,则会很有用。