Question

根据我的研究; 新款智能手机的人像分辨率高达800px
片剂miniumum肖像分辨率600px

现在我正在尝试使用媒体查询将移动css渲染到支持分辨率高达800px的手持设备，但我遇到的问题是像ipad1那样具有768px纵向分辨率的旧平板电脑也在渲染移动css。 / p>

我需要确保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" />

Answer 1

我认为您尝试以媒体查询为基础的理念从一开始就存在缺陷：正如Ethan（技术的“发明者”）经常引用的那样，断点不应来自屏幕/设备大小，而应来自内容自然适合页面。使用基本样式排版和颜色开始构建移动优先，然后随着屏幕的增长，使用最小宽度：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/

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

1 个答案: