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?
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
max--moz-device-pixel-ratio; but the same prefixes as implemented by Webkit are named
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.