CODEWITHSUNDEEP
htmlcss
J Doe
J Doe

Reputation: 415

CSS Media Query not accounting for screen density?

I have the media query listed below. When screen width is less than 900, I amuse the device is a phone. This works perfectly when tested on my pc. However, when testing on my high resolution droid turbo, in chrome, it loads the tablet css file. So this doesn't seem to be accounting for screen density? How can you develop cross platform if that is the case?

<link media="screen and (min-width:0px) and (max-width:899px)" rel="stylesheet" type="text/css" href="phone.css">
<link media="screen and (min-width:900px) and (max-width:1299px)" rel="stylesheet" type="text/css" href="tablet.css">
<link media="screen and (min-width:1300px)" rel="stylesheet" type="text/css" href="computer.css">

Upvotes: 0

Views: 43

Answers (1)

Eric Wiener
Eric Wiener

Reputation: 5987

Add this meta tag to the head of your html document to make the width of the page equal to the width of the phone screen: <meta name="viewport" content="width=device-width, initial-scale=1.0"/>. Then, use min-device-width and max-device-wdith, instead of just min-width and max-width to target the actual dimensions of the phone (many mobile devices will scale websites so they display the same as they would on a browser, changing the dimensions they appear to have.).

Upvotes: 1

Related Questions