devicePixelRatio.html 716 B

123456789101112131415161718192021222324
  1. <!DOCTYPE html>
  2. <style>
  3. #detector { width: 5px; }
  4. @media (-webkit-device-pixel-ratio:1) { #detector { width: 10px; } }
  5. @media (-webkit-device-pixel-ratio:3) { #detector { width: 30px; } }
  6. @media (-webkit-device-pixel-ratio:4) { #detector { width: 40px; } }
  7. </style>
  8. <script>
  9. function devicePixelRatioFromStyle() {
  10. var width = getComputedStyle(document.getElementById("detector")).width;
  11. switch (width) {
  12. case "10px":
  13. return 1;
  14. case "30px":
  15. return 3;
  16. case "40px":
  17. return 4;
  18. default:
  19. return "unknown width: " + width;
  20. }
  21. }
  22. </script>
  23. <div id="detector"></div>