如何强制网页在 iPhone 和 Android 上始终以 1.0（不是 1.5）的像素比呈现？

Posted 2023-03-06

【中文标题】如何强制网页在 iPhone 和 Android 上始终以 1.0（不是 1.5）的像素比呈现？

【英文标题】：How do I force a web page to ALWAYS be rendered with a pixel ratio of 1.0 (not 1.5) on iPhones and Androids?

【发布时间】：2011-12-14 11:56:57

【问题描述】：

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

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

我知道元视口方法，但据我目前所知，当缩放设置为 100% 且宽度设置为device_width，您可以检测移动设备正在渲染的像素比率。我似乎无法找到某种方法来明确强制设备仅使用 1.0 像素比例，而不是 1.5 像素比例。

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

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

<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 解释视口元标记和像素比率问题。

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

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

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

【问题讨论】：

像素还是点？ iPhone 3G 和 iPhone 4 的像素宽度相同，为 320，但纵向模式下的宽度为 320 或 640 像素。

像素。如果您在桌面浏览器中查看网页，并且有一个 240 像素宽的框，那么它实际上跨越 240 像素。如果你在手机上查看同一个网站，同一个框不会跨越屏幕实际像素的 240 像素，而是跨越 320 像素。也就是说，对于 CSS 中定义的每个“像素”，手机实际上会使用 1.5 个像素的屏幕来显示相同​​的内容。当您使用宽度设置为 device_width 且缩放级别设置为 1.0 的视口元标记时会发生这种情况。在这里阅读：developer.mozilla.org/en/Mobile/Viewport_meta_tag

我更新了我的问题。希望这能准确说明我的意思。

【参考方案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。希望对你有帮助。

【讨论】：

谢谢。我正在检查。