android - 如何强制网页在 iPhone 和 Android 上始终以 1.0(而非 1.5)的像素比呈现？

Question

例如，默认情况下，如果不存在视口(viewport)元标记，iPhone 和 Android 将自动缩放页面以尝试使其很好地适合框架。为桌面设计的网站将被缩小，以便它们适合小视口(viewport)，但显然像素并没有真正真实地呈现。

那么，如何在移动浏览器上显示完整大小的网页，以便“300px”在移动设备屏幕上实际显示为 300 个真实像素？

我知道元视口(viewport)方法，但据我所知，在这种情况下，当缩放设置为 100% 且宽度设置为device_width，你可以检测移动设备渲染的像素比。我似乎无法找到某种方法来明确强制设备仅使用 1.0 像素比，而绝不使用 1.5 像素比。

我如何让设备使用 1.0 的像素比，以便 CSS 中定义的 300 个“像素”实际呈现在移动设备屏幕上的 300 个像素上？如何以实际真实大小而不是像素比 1.5 显示网页？

编辑 2011 年 10 月 24 日下午 6:50:这是我不想要的示例:目前，如果您使用元标记来设置移动浏览器的视口(viewport)属性，如下所示:

<meta name="viewport" content="width=device_display, initial-scale=1.0" />

那么这意味着移动浏览器将呈现页面几乎与页面设计完全一样，除了 CSS 中定义的每个“像素”实际上包含设备屏幕上的 1.5 个像素，因此像素比为 1.5。设置此 1.5 像素比率约定是为了让设计在高分辨率设备上不会显得太小。

我明白这一点，但我不想这样。

我希望强制像素比率始终为 1.0，并且我会以自己的方式处理高分辨率设备。如何在移动浏览器中强制使用 1.0 像素比率？

Here's the info解释视口(viewport)元标记和像素比率问题。

此外，here's a trick这允许您根据检测到的像素比率显示不同的图形，这不是我想要做的，但如果没有其他选择，我会这样做。

如何将像素比率强制设置为 1.0？

编辑 2011 年 11 月 3 日晚上 8:56: 有人吗？

Answer 1

我不确定您会如何使用它，但我知道在 Webkit 中作为 -webkit-device-pixel-ratio 实现的媒体查询可以告诉您正在使用的比例。 Gecko 实现的最小和最大前缀分别命名为 min--moz-device-pixel-ratio 和 max--moz-device-pixel-ratio；但与 Webkit 实现的相同前缀被命名为 -webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio
取自:https://developer.mozilla.org/en/CSS/Media_queries/ .
另请考虑此链接:http://www.hanselman.com/blog/SupportingHighdpiPixeldenseRetinaDisplaysLikeIPhonesOrTheIPad3WithCSSOrIMG.aspx .希望对您有所帮助。