The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Media Query based on Screen size? ( not Resolution ) Reply To: Media Query based on Screen size? ( not Resolution )


I’m not sure if I completely understand your problem. I think you’re worried about the physical size of tablet screens vs. the amount of pixels in them?

iPad’s and Samsung Galaxy’s do indeed have a high DPI screen, but they will handle pixels in your stylesheet in the same way as normal screens, so you don’t have to worry about that.

If you write media queries that follow the standard syntax, and create your layout using percentages (and the new box model), you shouldn’t have a problem.

However, if you want to detect the DPI of a screen in JavaScript, you can use window.devicePixelRatio which returns an integer (i.e. on a Retina MacBook Pro & iPhone it returns 2). As for getting the screen’s size in inches, that doesn’t seem to be possible.