媒体查询设备像素比例不起作用

我的媒体查询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

媒体查询设备像素比例不起作用

回答

相关问题