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.
例如,默认情况下,如果不存在视口元标记,则iPhone和Androids将自动缩放页面以尝试使其非常适合框架。专为桌面设计的网站将被缩小,以便它们适合小视口,但显然像素并未真实地表示。
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?
那么,如何在移动浏览器上显示完整尺寸的网页,以便“300px”实际上在移动设备的屏幕上以300个真实像素表示?
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.
我知道meta视口方法,但是从目前为止我所知道的,当缩放设置为100%并且宽度设置为device_width时,在这种情况下使用的像素比为1.5或1.0,并且您可以检测移动设备正在渲染的像素比率。我似乎无法找到某种方法明确强制设备仅使用1.0像素比率而不使用1.5像素比率。
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?
如何让设备使用1.0的像素比率,以便CSS中定义的300“像素”实际渲染移动设备屏幕上的300像素?如何以实际尺寸显示网页,而不是像素比率为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:
编辑下午6:50 pm 10/24/2011:这是我不想要的一个示例:目前,如果您使用元标记来设置移动浏览器的视口属性,如下所示:
<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.
然后这意味着移动浏览器将呈现页面几乎与页面设计完全一样,除了CSS中定义的每个“像素”实际上包含设备屏幕上的1.5像素,因此像素比率为1.5。设置这种1.5像素比率的惯例,使得设计在高分辨率设备上看起来不会太小。
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?
我希望强制像素比率为1.0,我会以自己的方式处理高分辨率设备。如何在移动浏览器中强制使用1.0像素比率?
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?
如何将像素比率强制为1.0?
EDIT 11/3/2011 8:56pm: Anyone?
编辑11/3/2011 8:56 pm:任何人?
1 个解决方案
#1
1
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 named min--moz-device-pixel-ratio and max--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.
我不确定你会如何使用它,但我知道在Webkit中实现的媒体查询as -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。我希望它有所帮助。
#1
1
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 named min--moz-device-pixel-ratio and max--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.
我不确定你会如何使用它,但我知道在Webkit中实现的媒体查询as -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。我希望它有所帮助。