我正在尝试创建一组三个非常简单的媒体查询来处理一系列屏幕尺寸.这是我想出来的,经过一阵头痛:
@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以下的任何指定的最大宽度报告我的“medium res”消息.任何帮助赞赏,谢谢提前.