如何强制网页在 iPhone 和 Android 上始终以 1.0(而不是 1.5)的像素比渲染?
例如,默认情况下,如果不存在视口元标记,iPhone 和 Android 会自动缩放页面,以使其很好地适合框架。为桌面设计的网站将被缩小,以便它们适合小视口,但显然像素并没有真正真实地表示。
那么,如何在移动浏览器上显示全尺寸网页,以便“300px”实际上在移动设备屏幕上用 300 个真实像素表示?
我知道元视口方法,但据我目前所知,当缩放设置为 100% 且宽度设置为 device_width 时,在这种情况下使用的像素比为 1.5 或 1.0,并且您可以检测移动设备渲染的像素比。我似乎无法找到某种方法来明确强制设备仅使用 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 像素比?
这里的信息解释了视口元标记和像素比率问题。
另外,这里有一个技巧,可以让你显示不同的图形取决于检测到的像素比,这不是我想要做的,但如果没有其他选择,我会这样做。
如何强制像素比值为 1.0?
编辑 2011 年 11 月 3 日晚上 8:56:有人吗?
For example, by default, iPhones and Androids will automatically zoom the page to attempt to make it fit nicely in the frame if no viewport meta tag exists. Web sites designed for desktops will be zoomed out so they fit inside the small viewport, but obviously the pixels aren't really represented truthfully.
So, how do I display a full size web page on a mobile browser so that "300px" is actually represented with 300 real pixels on the mobile device's screen?
I know about the meta viewport method, but from what I've been able to tell so far, the pixel ratio used in such cases is 1.5 or 1.0 when the zoom is set to 100% and the width is set to the device_width, and you can detect at what pixel ratio the mobile device is rendering. I don't seem to be able to find some way to explicitly force devices to use only the 1.0 pixel ratio and never the 1.5 pixel ratio.
How do I for a device to use a pixel ratio of 1.0 so that 300 "pixels" as defined in the CSS actually render across 300 pixels on the mobile device's screen? How do I display a web page at its actual truthful size, not with a pixel ratio of 1.5?
EDIT 6:50pm 10/24/2011: Here's an example of what I DON'T want:
Currently, if you use the meta tag to set the viewport properties of a mobile browser like this:
<meta name="viewport" content="width=device_display, initial-scale=1.0" />
then that means that the mobile browser will render the page almost exactly like as the page was designed, except that each "pixel" defined in the CSS actually encompasses 1.5 pixels on the device's screen, thus a pixel ratio of 1.5. This 1.5-pixel-ratio convention was set so that designs don't appear to be too small on high-res devices.
I understand that, but I don't want that in my case.
I want a forced pixel ratio of 1.0 ALWAYS and I will handle high-res devices in my own way. How do I force a 1.0 pixel ratio in mobile browsers?
Here's the info explaining the viewport meta tag and the pixel ratio issue.
Also, here's a trick that allows you to display different graphics depending on what pixel ratio is detected, which is NOT what I want to do, but will if there is no other option.
How do I force the pixel ratio to a value of 1.0?
EDIT 11/3/2011 8:56pm: Anyone?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(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。我希望它有帮助。
I'm not sure how you would use it but I know that media queries implemented in Webkit as
-webkit-device-pixel-ratio
can tell you what ratio is being used. The min and max prefixes as implemented by Gecko are namedmin--moz-device-pixel-ratio
andmax--moz-device-pixel-ratio
; but the same prefixes as implemented by Webkit are named-webkit-min-device-pixel-ratio
and-webkit-max-device-pixel-ratio
Taken from: https://developer.mozilla.org/en/CSS/Media_queries/.
Also consider this link: http://www.hanselman.com/blog/SupportingHighdpiPixeldenseRetinaDisplaysLikeIPhonesOrTheIPad3WithCSSOrIMG.aspx. I hope it helps.