使用CSS @media查询目标移动设备分辨率的最准确方法是什么？ [英] what is the most accurate way to query target mobile device resolutions with CSS @media?

问题描述

如果我使用 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 ）和（max-device-width：854px）{} 
 @media屏幕和（min-device-width：855px）和（max-device-width：960px）{} 
  
 
 
解决方案
这里有一些Css可​​以帮助你：
  //目标小屏幕（移动设备或小桌面窗口）
 @media只有屏幕和（最大宽度：480像素）{
 / * CSS到这里* / 
} 
 
 / *高分辨率屏幕* / 
 @media（-webkit-min-device-pixel-ratio：2），
 min-moz-device-pixel-ratio：2），
（min-resolution：300dpi）{
 header {background-image：url（header-highres.png）; } 
} 
 
 / *低分辨率屏幕* / 
 @media（-webkit-max-device-pixel-ratio：1.5），
 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  
 
If I use max-device-width does that include landscape mode?

Say I use it to detect iPhone 4, should I use max-device-width: 640px or 960px? I need to get 3 resolutions: 480x320, 960x640 and 854x480. What would be the best way to query for them using @media

My take was:
@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) {}

解决方案
Here is some Css to help you:
// 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); }  
}  
Have a read through this link it should solve your problem 

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

                        
这篇关于使用CSS @media查询目标移动设备分辨率的最准确方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！