css 媒体查询处理新的高分辨率手机，同时忽略平板电脑

Question

根据我的研究；新智能手机人像分辨率高达800px
平板电脑最小纵向分辨率 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 媒体查询似乎符合我的目的。我已经在 samsung 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" />

Answer 1

我认为您尝试基于媒体查询的理念从一开始就存在缺陷:正如 Ethan(该技术的“发明者”)经常引用的那样，断点不应该来自屏幕/设备尺寸，而是来自如何内容自然适合页面。开始使用排版和颜色的基本样式构建移动优先，然后随着屏幕的增长，使用 min-width:500px (例如)添加一些布局/列，并继续进行，直到您认为可以利用可用空间桌面宽 22 英寸分辨率，如 1900 像素及以上。我为我的博客 ( 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/