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

如果我使用max-device-width,那包括横向模式吗？

假设我用它来检测iPhone 4,我应该使用max-device-width：640px还是960px？我需要获得3个分辨率：480×320,960×640和854×480.使用@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) {}

这里有一些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