Get Screen DPI For Responsive Web Design

Question

I am trying to create a responsive Web which run on every device, while I was searching related topics. I read so many time of DPI, High DPI. I have read of it & understand that it is really important to design responsive website run on every device beautifully. But My main concern is that "How to get device dpi & how to apply css (media queries) for that".

After that I have also issue of testing it on so many devices,so is there any tool which can simulate target devices environment for testing the same.

Answer 1

You Can Download Ripple Emulator Add-on for chrome than you can test your website on different screen & dpi devices. Much Better

Answer 2

There's a terrific set of slides (PDF) from http://quirksmode.org/ that discuss Responsive Web Design, screen resolutions and pixel density: http://quirksmode.org/presentations/Spring2014/viewports_sf2.pdf

The blog's author discusses pixel ratio in more detail here: http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html

There's actually not a single answer for this, at the moment, as Android and the Retina MacBook tend to complicate approaches that would have ordinarily worked on the iPhone and other devices.

I hope the links are helpful.