1

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.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Rutvik Tailor
  • 11
  • 5
  • don't know about dpi but you can get the screen resolution and save it to a cookie with js – Exlord Dec 14 '13 at 05:48
  • Have you seen this discussion: https://groups.google.com/forum/#!topic/mozilla.dev.webapps/0KuFEXbO8XA – Jason Weathersby Dec 14 '13 at 06:14
  • When I create a responsive design I depend on a static resolution. Mobile is around 600px, Tablet is about 800-900px and desktop and be up to 1980px. I am writing this form the top of my head. I would suggest checking out how Twitter Bootstrap handles responsive media queries. Its a great place to start. http://getbootstrap.com/2.3.2/index.html – snowYetis Dec 14 '13 at 06:16

2 Answers2

1

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.

jokeyrhyme
  • 3,258
  • 2
  • 20
  • 20
0

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

Rutvik Tailor
  • 11
  • 5