Search code examples
iphonepixel

iPhone: Force web page to ALWAYS be rendered with a pixel ratio of 1.0 (not 1.5)

This has been asked on here before, but it was never resolved, so I decided so see if anyone has figured out how to do this in the past year:

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?

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?

**If there is a way to simply double the pixel ratio that would work as well

Solution

  • I was able to fix this problem for my site using the following code:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">