4

根据我的研究；新的智能手机人像分辨率高达 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" />
4

1 回答 1

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/

于 2012-07-03T20:20:55.760 回答