css - 笔记本电脑屏幕注册为最大宽度：320 像素，方向：纵向

Question

在具有笔记本电脑和视网膜 MacBook 的高清 Windows 8 IE 上进行了测试。没人遇到过这个问题吗？似乎放在max-width: 320px最后应该可以防止它，因为显然这些屏幕超过 320 像素。

@media screen, handheld,  
(min-moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(orientation: portrait),
(max-width: 320px)

该网站在这里。

Answer 1

使用(min/max-)resolution作为(min/max-])device-pixel-ratio支持 IE 的等价物：

@media (min-resolution: 1.5dppx), (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2) {}

或通过 matchMedia：

if (window.matchMedia) 
  {
  if (window.matchMedia('(resolution: 96dpi)').matches) { }
  // resolution feature & dppx unit
  if (window.matchMedia('(min-resolution: 1dppx)').matches) { }
  // -webkit-device-pixel-ratio feature
  if (window.matchMedia('(-webkit-min-device-pixel-ratio: 1)').matches) { }
  // -o-device-pixel-ratio feature
  if (window.matchMedia('(-o-min-device-pixel-ratio: 1/1)').matches) { }
  }

参考

• MSDN：分辨率媒体功能

• CSS WG 博客：如何取消前缀 -webkit-device-pixel-ratio