CSS媒体查询处理新高分辨率移动设备，同时忽略平板电脑。

Question

CSS媒体查询处理新高分辨率移动设备，同时忽略平板电脑。

cssmobilemedia-queries

4

根据我的调查，新的智能手机纵向分辨率高达800像素；平板电脑的最小纵向分辨率为600像素。

现在我正在尝试使用媒体查询将移动CSS渲染到支持高达800像素分辨率的手持设备上，但问题是像iPad1这样的旧平板电脑具有768像素的纵向分辨率也会呈现移动CSS。

我需要确保600像素及以上的平板电脑和台式电脑呈现宽屏CSS，而最大纵向分辨率为800像素的移动电话呈现移动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" />

谢谢您的提前帮助，Omar。

更新：

下面这个包含两种情况的媒体查询似乎符合我的目的。我已在三星Galaxy S2、Google Nexus和iPhone 4上进行了测试，看起来工作正常。需要验证平板电脑。

<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" />

- Omar999

1

这变得越来越恼人了（我正准备自己发布一个问题）。有些手机的分辨率是1280x720，有些平板的分辨率是1920x1080。你的竖屏/横屏想法对这些分辨率不起作用。我不希望我的桌面布局（适用于20英寸以上的显示器）在10英寸的平板电脑上以那种方式显示。我知道有dpi查询，但那时我们将在设备级别上进行设计。也许我们可以开始使用“width:2in”。呵呵呵... - doubleJ

你也可以使用 media="handheld and bla" 而不是 screen。 - Simon

我删除了之前的评论，因为我找到了一些新的信息...根据W3的说法，1像素（px）= 0.75点（pt），1点（pt）= 1/72英寸（in），所以试图使用英寸来解决高分辨率设备的问题是行不通的（它只是将像素转换为英寸）。当我的12.1英寸，1280x800像素的笔记本显示来自12-14英寸媒体查询的样式时，我的11.6英寸，1366x768像素的笔记本显示来自14英寸以上媒体查询的样式。这个W3页面上有一个盒子，应该是1英寸高，但在我的11.6英寸屏幕上大约只有3/4英寸高。 - doubleJ

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- George Katsanos · Accepted Answer

我认为你试图基于媒体查询的哲学从一开始就是有缺陷的：正如技术的“发明者”Ethan经常引用的那样，断点应该不是来自屏幕/设备尺寸，而是来自内容在页面上的自然适配程度。首先使用基本的排版和颜色样式构建移动优先的设计，然后随着屏幕尺寸的增大，使用min-width: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/