css媒体查询处理新的高分辨率手机，而忽略平板电脑 [英] css media query to handle new high resolution mobiles whilst ignoring tablets

问题描述

根据我的研究;
新的智能手机肖像分辨率高达800px

tablet miniumum portrait resolution 600px

According to my research; new smart phones portrait resolution is up to 800px
tablets miniumum portrait resolution 600px

现在我想使用媒体查询移动css到支持分辨率高达800px的手持设备，但我所遇到的问题是像ipad1，768像素的肖像分辨率的老式平板也渲染移动css。

Now I'm trying to use media queries to render mobile css to handheld devices supporting resolutions up to 800px but the problem I'm having is older tablets like the ipad1 with a 768px portrait resolution are also rendering the mobile css.

我需要确保平板电脑+台式电脑从600像素及以上渲染宽屏css，而手机的最大肖像分辨率为800px渲染移动css。

I need to ensure that tablets + desktop pcs from 600px and higher render the widescreen css whilst mobile phones with a max portrait resolution of 800px render the mobile css.

如何我这样做，尽管交叉的移动&平板电脑宽度？

How can I do this despite the crossover of mobile & tablet widths?

这是我目前的设定...

this is my current setup...

<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。

thanks in advance Omar.

更新：

以下2 in 1媒体查询似乎符合我的目的。我测试了三星Galaxy S2，谷歌nexus和iphone4，它似乎工作正常。需要验证平板电脑。

the following 2 in 1 media query seems to fit my purpose. I've tested on samsung galaxy s2, google nexus and iphone4 and it seems to be working fine. need to verify tablets.

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

推荐答案

我认为媒体查询从一开始是有缺陷的：正如Ethan（技术的发明者）所经常提到的，断点不应该源自屏幕/设备大小，而是从内容如何适合页面。
开始构建基于移动设备的版式和颜色的基本样式，然后随着屏幕的增长，使用min-width：500px（例如）添加一些布局/列，并持续到你认为你利用可用空间在桌面宽22英寸分辨率，如1900px及以上。我为我的博客（ http://www.gplus.gr/blog ）做了 - 仅开发Chrome在桌面，当它检查网站在其他设备，它的工作原理像一个魅力：Android 2.x，Android 4.x，Kindle，iPad等等。

I think the philosophy you're trying to base your media queries on is flawed from the start: As quoted often by Ethan (the "inventor" of the technique) breakpoints shouldn't derive from screen/device sizes but from how the content fits naturally to the page. Start building mobile-first with basic styles for typography and color, then as your screen grows, use min-width:500px (for example) to add some layout/columns, and keep going until you think you take advantage of the available space in desktop wide 22inch resolutions like 1900px and above. I did that for my blog ( http://www.gplus.gr/blog ) - developed only with Chrome in Desktop, and when went to check the website in other devices it worked like a charm: Android 2.x , Android 4.x , Kindle, iPad etc etc..

http：// coding。 smashingmagazine.com/2012/03/22/device-agnostic-approach-to-responsive-web-design/

这篇关于css媒体查询处理新的高分辨率手机，而忽略平板电脑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！