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

HTML & CSS
1

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?

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

2

There’s no way.

Here’s an example of what I DON’T want…

Sorry, that’s precisely what you need. Forget pixels. make content that fits the devices screens without zooming.

The iphone4 has a res of 320px x 480px in the CSS.

3

Hi jaclyn_psi. Welcome to the forums. :slight_smile:

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?

You could try something like this:

<meta name="viewport" content="width=300">
4

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?

I think @jaclyn_psi; is asking how to make different devices render the pixel differently.

e.g. render the iphone 3 at 300px (almost full screen) and the iphone 4 at 150px(less than half).
I have no idea why someone would want to do this but I suppose you could with js doing something like…


<meta id="viewport" name="viewport" content="width=300">
<script>
window.onload = function() {
  if (window.devicePixelRatio) {
    document.getElementById('viewport').content = 'width=' + (300 / window.devicePixelRatio);
  }
});
</script>
5

Yeah, I wasn’ sure if I was interpreting rightly. Looks like a clever solution, anyhow, Mark. :slight_smile: