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

Posted 2023-03-06

【中文标题】css 媒体查询来处理新的高分辨率手机，同时忽略平板电脑

【英文标题】：css media query to handle new high resolution mobiles whilst ignoring tablets

【发布时间】：2012-05-31 02:17:31

【问题描述】：

根据我的研究； 新款智能手机人像分辨率高达 800px 平板电脑最低纵向分辨率 600 像素

现在我正在尝试使用媒体查询将移动 CSS 渲染到支持高达 800 像素分辨率的手持设备上，但我遇到的问题是像 ipad1 这样具有 768 像素纵向分辨率的旧平板电脑也在渲染移动 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" />

提前致谢 奥马尔。

更新：

以下二合一媒体查询似乎符合我的目的。我已经在 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" />

【问题讨论】：

这变得越来越烦人（我自己正准备发布一个问题）。有运行 1280x720 的手机和运行 1920x1080 的平板电脑。您的肖像/风景创意不适用于这些分辨率。我不希望我的桌面布局（适用于 20 英寸以上的显示器）在 10 英寸平板电脑上以这种方式显示。我知道有 dpi 查询，但我们将在设备级别进行设计（那时）。也许我们可以开始使用“width:2in”。嘿嘿嘿……

你也可以用 media="handheld and bla" 代替 screen 来指定。

我删除了以前的cmets，因为我发现了一些新信息...According to W3，1px = 0.75pt 和 1pt = 1/72in，所以尝试使用英寸来克服高分辨率设备问题不起作用（它只是将 px 转换为 in）。当我的 12.1"、1280x800px 笔记本电脑显示来自 12-14" 媒体查询的样式而我的 11.6"、1366x768px 笔记本电脑显示来自 14"+ 媒体查询的样式时，我发现了这一点。 This W3 page 有一个盒子，它应该是 1 英寸高，但在我的 11.6 英寸上大约有 3/4 英寸。

【参考方案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/

【讨论】：

当您考虑到移动设备的数据限制（通常要避免通过 3G、4G 等进行视频流传输）时，这种理念开始崩溃。

每个人每月都有 3GB 的计划，我认为数据限制已成为过去的问题，您的评论并没有真正取消这一理念。你只需要使用一些额外的层，比如特征检测，你不能自动播放你的视频，我相信移动浏览器已经为你处理了。

禁用自动播放与不加载视频内容不同。此外，您不能假设人们会有足够大的数据计划（顺便说一句，每月 2 或 3GB 不足以定期流式传输视频）来处理***浏览体验。

为什么不想显示视频内容？我已经在包括移动设备在内的网站中看到了大量 html5 视频的用途。从什么时候开始，我们又回到了用户代理嗅探和类似的黑客行为？是 2008 年吗？