我正在尝试创建一组三个非常简单的媒体查询来处理各种屏幕尺寸.这是我想出来的一堆头像:
@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 }
Run Code Online (Sandbox Code Playgroud)
这可以像我在浏览器中预期的那样工作,但当我指向我的iphone时,它坚持显示中等大小的syles.使用这些数字,我发现只有最大宽度为980px的iphone才会响应该查询中的样式.
请注意,我在这些查询中使用"all"来排除与是否编写"掌上电脑"或"屏幕,手持设备"等有关的任何问题.尝试简化以帮助我理解问题.
我认为它可能与我正在开发的页面的内容有关,所以我创建了一个无内容的测试页面来试图确定问题.它在:
http://rgdaniel.com/test-mediaquery.php
如果我使用桌面浏览器查看该页面,当我调整窗口大小时,它会按预期运行.但iPhone会以980px以下的任何指定最大宽度报告我的"中等分辨率"消息.任何帮助表示感谢,提前谢谢.