根据我的研究；
新款智能手机人像分辨率高达800px
平板电脑最低纵向分辨率 600px
现在，我尝试使用媒体查询将移动 css 渲染到支持高达 800px 分辨率的手持设备，但我遇到的问题是旧平板电脑（例如具有 768px 纵向分辨率的 ipad1）也会渲染移动 css。
我需要确保 600px 及以上的平板电脑+台式电脑渲染宽屏 css，而最大纵向分辨率为 800px 的手机渲染移动 css。
尽管手机和平板电脑宽度交叉，我该如何做到这一点？
这是我当前的设置...
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,
user-scalable=0,width=device-width" />
<link rel="stylesheet" media="screen and (max-device-width: 800px)"
href="/css/mobile.css" />
<link rel="stylesheet" media="screen and (min-device-width: 600px)"
href="/css/widescreen.css" />
提前致谢
奥马尔.
更新：
以下二合一媒体查询似乎符合我的目的。我已经在三星 Galaxy s2、谷歌 Nexus 和 iPhone4 上进行了测试，似乎工作正常。需要验证平板电脑。
<link rel="stylesheet" type="text/css" media='only screen and (max-width:480px) and
(orientation: portrait), only screen and (max-width:800px) and (orientation:
landscape)' href="mobile.css" />
我认为你试图建立媒体查询的哲学从一开始就存在缺陷：正如伊森（该技术的“发明者”）经常引用的那样，断点不应源自屏幕/设备尺寸，而应源自内容的适配方式自然到页面。
开始使用基本的版式和颜色样式构建移动优先，然后随着屏幕的增长，使用 min-width:500px （例如）添加一些布局/列，并继续下去，直到您认为您利用了可用空间桌面宽 22 英寸分辨率，如 1900 像素及以上。我为我的博客这样做了（http://www.gplus.gr/博客） - 仅在桌面上使用 Chrome 开发，当在其他设备上检查该网站时，它就像一个魅力：Android 2.x、Android 4.x、Kindle、iPad 等。
http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
