Android 浏览器上的媒体查询失败
我正在尝试开发一个网络应用程序，它根据设备（及其方向）应用适当的样式表。
我总共有 5 个媒体查询：
//for mobile phones in portrait mode
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="css/mobile-portrait.css">
//for mobile phones in landscape mode
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="css/mobile-landscape.css">
//for tablets (iPad) in portrait mode
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="css/tablet-portrait.css">
//for tablets (iPad) in landscape mode
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="css/tablet-landscape.css">
//for desktop computers
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="css/desktop.css">
在桌面、iPad 和 iPhone（浏览器和 Web 应用程序版本）上一切正常，但横向媒体查询在 Android 浏览器上失败？有什么想法吗？我的“最大设备宽度”有误吗？
I am trying to develop a web app which applies an appropriate style sheet depending on the device (and its orientation).
I have 5 media queries in total:
//for mobile phones in portrait mode
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="css/mobile-portrait.css">
//for mobile phones in landscape mode
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="css/mobile-landscape.css">
//for tablets (iPad) in portrait mode
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="css/tablet-portrait.css">
//for tablets (iPad) in landscape mode
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="css/tablet-landscape.css">
//for desktop computers
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="css/desktop.css">
Everything works on the Desktop, iPad and the iPhone (in both browser and web app versions) but the landscape media query fails on Android's browser? Any ideas? Have I got the 'max-device-width' wrong?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这是因为大多数较新的 Android 手机的宽度约为 480 x 800 高，具体取决于设备，因此按照您的编写方式，Android 景观应该由平板电脑景观 css 选取。但我想我遇到了类似的问题，Android 没有选择样式表，所以我添加了这个，一切似乎都正常......
你的脑海中是否有这个在你的样式表链接上方？
That's because most newer android phones are something like 480 wide by 800 tall depending on device, so the way you have yours written, Android Landscape should be picked up by the tablet landscape css. But I think I ran into a similar issue with Android not picking up the stylesheet, so I added this and everything seemed to work...
Do you have this in your head above your stylesheet links?
在 Droid1 上 - 视口大小为 320 x 569。
On the Droid1 - the viewport size is 320 x 569.