css - 使用 CSS @media 查询目标移动设备分辨率的最准确方法是什么？

Question

如果我使用 max-device-width 是否包括横向模式？

假设我用它来检测 iPhone 4，我应该使用 max-device-width: 640px 还是 960px？我需要获得 3 种分辨率:480x320、960x640 和 854x480。使用 @media

查询它们的最佳方式是什么

我的看法是:

@media screen and (max-device-width: 480px) {}
@media screen and (min-device-width: 481px) and (max-device-width: 854px) {}
@media screen and (min-device-width: 855px) and (max-device-width: 960px) {}

Answer 1

这里有一些 Css 可以帮助你:

// target small screens (mobile devices or small desktop windows)  
@media only screen and (max-width: 480px) {  
  /* CSS goes here */  
}  

/* high resolution screens */  
@media (-webkit-min-device-pixel-ratio: 2),  
             (min--moz-device-pixel-ratio: 2),  
             (min-resolution: 300dpi) {  
  header { background-image: url(header-highres.png); }  
}  

/* low resolution screens */  
@media (-webkit-max-device-pixel-ratio: 1.5),  
             (max--moz-device-pixel-ratio: 1.5),  
             (max-resolution: 299dpi) {  
  header { background-image: url(header-lowres.png); }  
}  

阅读此链接应该可以解决您的问题

http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript