Search code examples
htmlmobileresponsive-designretina-display

Display website in correct ratio on retina display


I am currently making a responsive design using CSS @media query, which works fine on "old" phones with a pixel ratio of 1:1.

But high-resolution (retina) displays are using ratios other than 1:1 for displaying the website, so the website looks small.

How do I set the pixel ratio it should use?

I tried to google it but I found only ways how to set an extra style for those displays.


Solution

  • The viewport meta tag can be used to fix the browser's viewport width to match the device's width. This overcomes the common problem of websites show up really small on high-resolution screens, like Apple's retina displays.

    <meta name="viewport" content="width=device-width">