媒體查詢設備像素比例不起作用

我的媒體查詢LESS在桌面上工作正常，但在測試iPad2或三星Galaxy 4手機時沒有問題，而且它似乎是device-pixel-ratio，它正在拋棄。我將min-device-pixel-ratio降爲1.5。那也行不通。出於某種原因，儘管三星640x320分辨率和iPad的1024x768分辨率，三星和iPad都進入了相同的查詢。任何想法如何更好地打破這些媒體查詢？媒體查詢設備像素比例不起作用

更少的代碼：

@screenXS:~"screen and (max-width:479px)"; 
@screenS:~"screen and (min-width: 480px) and (max-width:639px)"; 
@screenM:~"screen and (min-width: 640px) and (max-width:767px)"; 
@screenL:~"screen and (min-width: 768px) and (max-width:1023px)"; 
@screenXL:~"screen and (min-width: 1024px)"; 
@dpr:~"(-webkit-min-device-pixel-ratio:2) and (min-device-pixel-ratio:2)"; 

.myElement { 
    @media @screenXS { 
      font-size: 10px; 
      line-height: 18px; 
      @media @dpr { 
       color:#f00 !important; 
       font-size:20px; 
      } 
    } 
    @media @screenS { 
      font-size: 11px; 
      line-height: 20px; 
      @media @dpr { 
       color:#0f0 !important; 
       font-size:30px; 
      } 
    } 
    @media @screenM, @screenL { 
      font-size: 12px; 
      line-height: 21px; 
      @media @dpr { 
       color:#00f !important; 
       font-size:50px; 
      } 
    } 
    @media @screenXL { 
      font-size: 14px; 
      line-height: 25px; 
      @media @dpr { 
       color:#ff0 !important; 
       font-size:100px; 
      } 
    } 
}

來源

2014-09-12 itsmikem

假設它們都屬於'[640 ... 1023]'，媒體並不僅僅意味着iPad在測試過程中的方向是縱向的？（即'768x1024'而不是'1024x768'）。 – 2014-09-13 03:01:18

不是。我遇到的問題是我看到相同的媒體查詢已用於手機和iPad。我相信他們應該使用不同的媒體查詢。 – itsmikem 2014-09-14 12:07:41

請重新閱讀我寫的內容。他們可能會使用相同的媒體查詢*如果*「iPad在測試過程中的方向是肖像」，則它們都屬於'@screenM，@ screenL'媒體。至少我沒有看到其他原因，否則他們會這樣做。 – 2014-09-14 12:11:32

嘗試這樣的事情:)

<link href="css/mobile_portrait.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 320px) and (orientation: portrait)"> 
<link href="css/mobile_landscape.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 480px) and (orientation: landscape)"> 
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)"> 
<link href="css/netbook.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1024px)"> 
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1224px)">

它只是一個例子！

來源

2014-09-12 15:02:03

媒體查詢設備像素比例不起作用

回答

相關問題