CODEWITHSUNDEEP
cssgoogle-chromeresponsive-designresolutionpixel-ratio
kosijer
kosijer

Reputation: 331

How to override device pixel ratio

I made a responsive website which works fine with different screen resolutions. I use three different media queries - from 0 to 640, from 640 to 960 and above. Anyway if I try to open on my Samsung Galaxy Note2 which uses 720x1280, since it has pixel ratio 2, it reads the website as 360x640 device, but with 640-960 styles.

How can I be sure that the website will be displayed in original resolution?

I included this in the header:

<meta name="viewport" content="width=720, initial-scale=1, maximum-scale=1, user-scalable=no" />

If I add something like this in my stylesheet file

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
@viewport {
     max-zoom:50%;
     width:720px;
}
}

It works OK in Chrome's Emulation Mode, but not if I test it on the real mobile.

EDIT: Woo-hoo... I found a way to do that with JavaScript.

document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale='+(1/window.devicePixelRatio)+', maximum-scale=1.0, user-scalable=0');

It reads device pixel ratio and then sets the initial-scale value.

Upvotes: 10

Views: 20964

Answers (2)

Jeremy Andrew
Jeremy Andrew

Reputation: 69

<!doctype html>
<html>
  <head>
    <title>This is the title of the webpage!</title>
  </head>
  <script>
        function toggleZoomScreen() {
        document.body.style.zoom = (1 / window.devicePixelRatio);
        }
    </script>
  <body onload="toggleZoomScreen()" onresize="toggleZoomScreen()">
    <p>This is an example paragraph. Anything in the <strong>body</strong> tag will appear on the page, just like this <strong>p</strong> tag and its contents.</p>
`<img src="https://c.tenor.com/xlylHMRf90oAAAAj/funny-face.gif" width="50">`
  </body>
</html>

Here's an example that keeps the same size no matter the device's Pixel Ratio. (thanks to @chrisvfritz on Github for the simplest possible HTML template.)

When the document is loaded, it runs the script above, which sets the body's zoom to 1 divided by the device's pixel ratio, resulting in text and images being 1:1 scale.

PROS: Tested on different device scaling, works well.

CONS: Zoom does not work.

Upvotes: 6

Steve Sanders
Steve Sanders

Reputation: 8651

I haven't tested this, but try changing:

<meta name="viewport" content="width=720, initial-scale=1, maximum-scale=1, user-scalable=no" />

to

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

Setting the width to 720 would explain why your 640-960 styles are being applied.

Upvotes: 2

Related Questions