17

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

@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 像素时报告我的“中等分辨率”消息。任何帮助表示赞赏,在此先感谢。

4

1 回答 1

40

使用时,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

于 2013-11-13T05:14:28.367 回答