-1

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.

Daniel Widdis
  • 8,424
  • 13
  • 41
  • 63
jave.web
  • 13,880
  • 12
  • 91
  • 125
  • Google says http://css-tricks.com/snippets/css/retina-display-media-query/ – Jeremy Cook Jul 23 '14 at 14:50
  • @JeremyCook Yes I found that, but that just says how to make styles for retina specificly, not how to make it use different ratio – jave.web Jul 23 '14 at 15:09
  • 1
    Are you aware of the [viewport meta tag](http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html)? – Jeremy Cook Jul 23 '14 at 15:28
  • BTW your question is rather simple because you offer very little context, and seemed as simple as googling. Perhaps my last comment will get you over the hump. If it does not then a jsfiddle would likely help others (like me) help you. – Jeremy Cook Jul 23 '14 at 15:38
  • @JeremyCook Oh, my , god ! I knew there was a tag for that but could not remember which one :) , `` solved my prob :) BTW: sometimes questions and answers really are simple :) – jave.web Jul 23 '14 at 15:44
  • Glad that helped. I took the liberty to update the question and counteract the vote of -1. Unfortunately it looks like another person still thinks it's a bad question. Oh well. – Jeremy Cook Jul 23 '14 at 15:59

1 Answers1

2

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">
Jeremy Cook
  • 20,840
  • 9
  • 71
  • 77