css - 高 PPI 移动屏幕的主列表以及如何通过 CSS 检测/处理它?

标签 css mobile retina-display ppi

iPhone 4 的 Retina 显示屏密度是 iPhone 3 的两倍,但 Apple 处理得相当好,只是做了一个假设并在渲染时将像素加倍(这样你的网页在每台设备上看起来物理尺寸相同) .然后,您可以使用一些 webkit 媒体查询为该设备加载额外的 CSS (-webkit-min-device-pixel-ratio:2)。

问题:是否有资源 a) 列出现在使用高 PPI 屏幕的其他移动设备 b) 设备在呈现网站方面默认执行的操作和 c) 是否支持 webkit 检查和/还是它自己的自定义检测方法?

如果没有,也许这篇文章可以通过在特定设备上发布信息作为答案来成为该资源 (CW)。我必须开始处理使用高分辨率屏幕的黑莓和诺基亚设备(以及即将推出的 Android)。任何数据表示赞赏!

更新:

经过一些测试,我发现确实没有任何其他移动设备像 iPhone 4 那样将自己标识为双密度。现在有更高 PPI 的屏幕(通常在较小的设备上),但设备不会以任何方式声明自己为高 PPI。也许更好的解释方式是这些设备只有“非常小的像素”。

因此,考虑到所有网站都呈现相同的情况,确实没有一种实用的方法来处理这些设备,因此任何修改您的网站的尝试都可能会干扰用户自己的偏好和设置。

如果有人知道 iPhone 4 以外的任何设备正确声明自己为高 PPI,请告诉我!

最佳答案

类似的问题请看这里:

How to target iPhone 3GS AND iPhone 4 in one media query?

几天前我问过它,我认为没有这样的列表,但如果你知道你想要定位的设备,就不难找到并定位这些设备。

最好的检测方法是使用 CSS3 @media 查询,鉴于 Opera 是最流行的移动浏览器,可以安全地假设将 webkit 扩展与 @media 查询一起使用。

关于css - 高 PPI 移动屏幕的主列表以及如何通过 CSS 检测/处理它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5094040/

相关文章:

javascript - 如何通过js给运行时自动生成的图片应用类

html - 不需要的框出现在 chrome 中的文本周围,但不会出现在其他浏览器中

mobile - 为移动设备优化 prettyPhoto 灯箱?

facebook - 禁用 Facebook 移动浏览器检测?

javascript - 如何禁用 jQuery Mobile 中的链接按钮?

ios - NSBundle pathForResource :ofType: and UIImage imageWithContentsOfFile: handle scale and device modifiers? 怎么办

css - Retina 和 CSS 背景图片出现问题

javascript - 如何使用单选按钮更改文本大小 - JQuery Mobile

macos - 发货时如何在 Retina 显示屏上为应用程序启用 "use low resolution"?

css - 是否可以阻止用户 Page Up、Page Down、向上和向下箭头键滚动功能?