高PPI移动屏幕的主列表，以及如何通过CSS检测/处理它？ [英] Master list of high PPI mobile screens and how to detect/handle it via CSS?

问题描述

iPhone 4的Retina显示屏是iPhone 3的密度的两倍，但苹果处理它相当不错，但只是做一个假设和渲染时使像素加倍（使您的网页在每个设备上看起来相同的物理尺寸） 。然后，您可以使用一些webkit媒体查询来加载该设备的其他CSS（-webkit-min-device-pixel-ratio：2）。

问题：有资源a）列出现在使用高PPI屏幕的其他移动设备b）设备在呈现网站方面默认做什么和c）如果它支持webkit检查和/或它自己的自定义检测方法？

如果没有，这篇文章可能会通过在特定设备上发布信息作为答案而成为该资源（CW）。我必须开始处理使用高分辨率屏幕（和Android一起）的黑莓和诺基亚设备。任何数据感谢！

更新：

经过一些测试，我发现真的没有任何其他移动设备，它们将自己标识为与iPhone 4相同的双密度。现在有些屏幕具有高得多的PPI（通常在较小的设备上），但设备不以任何方式将其自身声明为高PPI。也许一个更好的方法来解释它是那些设备只有真正的小像素。

因此，真的没有一个实用的方式来处理这些设备给定所有网站都是相同的，因此任何尝试修改您的网站都可能会干扰用户自己的偏好设置。

如果任何人都知道iPhone之外的任何设备

解决方案

请参阅此处查找类似的问题：

如何在一个@media查询中定位iPhone 3GS和iPhone 4

我问了几天前，我不认为有这些东西的列表，但如果你知道你想要定位的设备是不难找出，因此目标这些设备。

最好的检测方法是使用CSS3 @media查询，并且考虑到Opera是最流行的移动浏览器，这是一个安全的假设，使用webkit扩展沿@media查询。

The iPhone 4's Retina display is double the density of of the iPhone 3, but Apple handled it fairly nicely but just making an assumption and doubling the pixels when rendering (so that your web page looks the same physical size on each device). You can then use some webkit media queries to load additional CSS just for that device (-webkit-min-device-pixel-ratio:2).

The question: Is there a resource that a) lists the other mobile devices that are now using high PPI screens b) what the device does by default in terms of rendering web sites and c) if it supports the webkit check and/or it's own custom detection method?

If not, perhaps this post could become that resource (CW) by posting info on specific devices as answers. I have to start dealing with BlackBerry and Nokia devices that are using the high res screens (and Android coming along). Any data appreciated!

UPDATE:

After some testing, I'm finding that there really aren't any other mobile devices that identify themselves as double-density as the iPhone 4 does. There are screens with much higher PPIs now (often on smaller devices) but the device doesn't in any way declare itself as high PPI. Perhaps a better way to explain it is that those devices just have 'really small pixels'.

As such, there really isn't a practical way to handle those devices given that ALL sites are rendered the same, so any attempt at modifying yours will likely interfere with the user's own preferences and settings.

If anyone knows of any devices other than the iPhone 4 that properly declare themselves as high PPI, let me now!

解决方案

See here for a similar quesiton:

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

I asked it a few days back, I don't think there is a list of such things but if you know the devices you want to target it is not hard to find out and thus target these devices.

The best detection method is to use CSS3 @media queries, and given that Opera is the most popular mobile browser it is a safe assumption to use the webkit extension along side the @media queries.

这篇关于高PPI移动屏幕的主列表，以及如何通过CSS检测/处理它？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！