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">
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
max-device-wdith, instead of just
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.).