What are best practices for detecting pixel ratio/density?

by

You should leverage the manufacturer’s hint via the <meta name="viewport" content="width=device-width"/> or @-ms-viewport {width:device-width} feature. It basically exposes the default zoom the device manufacturer considers optimal given the pixel density of the screen. After you do that, when you call window.innerWidth it will give you what your original equation was intended for but without relying on a measurement of pixel density.

Avoid relying on window.devicePixelRatio for anything. Its meaning and the value it returns is currently in a state of flux and anything you make right now based around it will most likely break very soon.

Note:
Meta viewport only works on Android, iOS, and Windows Phone 8. @-ms-viewport only works (properly) on IE10 Metro and can interfere with proper Meta viewport behavior on Windows Phone 8.

More Related Contents:

  1. What is the best way to detect a mobile device?
  2. Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions
  3. Detecting the system DPI/PPI from JS/CSS?
  4. Get GPS location from the web browser
  5. How to detect a mobile device with JavaScript?
  6. Removing address bar from browser (to view on Android)
  7. Are there any standards for mobile device web browsers in terms of thread sleeping? [closed]
  8. How to handle floats and decimal separators with html5 input type number
  9. jQuery: keyup event for mobile device
  10. :touch CSS pseudo-class or something similar?
  11. Detect between a mobile browser or a PhoneGap application
  12. How to check browser for touchstart support using JS/jQuery?
  13. What is the best method of re-rendering a web page on orientation change?
  14. Use jQuery to detect whether a device can make telephone calls (supports “tel://” protocol)
  15. Is it possible to control the camera light on a phone via a website?
  16. JS – Mobile – Open Safari from any browser [closed]
  17. Choosing Mobile Web HTML5 Framework [closed]
  18. Understanding touch events
  19. screen styling when virtual keyboard is active
  20. JavaScript resize event on scroll – mobile
  21. How to detect a mobile device using jQuery
  22. JavaScript how to check User Agent for Mobile/Tablet
  23. How to detect Facebook in-app browser?
  24. iphone/ipad triggering unexpected resize events
  25. How to detect which device view you’re on using Twitter Bootstrap API?
  26. Is there a way to Fix a Google Maps Marker to the Center of its Map always?
  27. html5 drag and drop FOR MOBILE [duplicate]
  28. How to detect if web app running standalone on Chrome mobile
  29. Mobile viewport height after orientation change
  30. Mobile detection [closed]

Leave a Comment