根据我的研究;新款智能手机的人像分辨率高达800px
片剂miniumum肖像分辨率600px
现在我正在尝试使用媒体查询将移动css渲染到支持分辨率高达800px的手持设备，但我遇到的问题是像ipad1这样具有768px纵向分辨率的旧平板电脑也在渲染移动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" />
在此先感谢奥马尔 .
更新：
以下2合1媒体查询似乎符合我的目的 . 我已经测试了三星galaxy s2，google 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" />
1 回答
我认为你的理念来自于屏幕/设备尺寸，而是来自内容如何自然地适应页面 . 使用基本样式排版和颜色开始构建移动优先，然后随着屏幕的增长，使用最小宽度：500px（例如）添加一些布局/列，并继续前进直到您认为利用可用空间为止桌面宽22英寸分辨率，如1900px及以上 . 我为我的博客做了这个（http://www.gplus.gr/blog） - 仅在桌面版Chrome中开发，当在其他设备上查看网站时，它就像一个魅力：Android 2.x，Android 4.x，Kindle，iPad等 .
http://coding.smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/