【发布时间】：2011-09-12 09:40:33
【问题描述】：
我正在尝试开发一个网络应用程序，该应用程序根据设备（及其方向）应用适当的样式表。
我总共有 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 上一切正常（浏览器和网络应用程序版本）但横向媒体查询在 Android 浏览器上失败？有任何想法吗？我把“最大设备宽度”弄错了吗？
【问题讨论】：
-
Web 设备通常不会报告您的预期，因此不会以您认为的方式对媒体查询做出反应。也许将您的测试浏览器指向ckollars.org/dimensions-no-meta-viewport.html 和ckollars.org/dimensions-meta-viewport.html 看看他们说什么会很有用。
标签： iphone android web-applications media-queries iphone-web-app