设备像素比的媒体查询不起作用答案

【问题标题】：media queries for device-pixel-ratio not working设备像素比的媒体查询不起作用
【发布时间】：2014-11-06 19:04:41
【问题描述】：

我在 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;
          }
     }
 }

【问题讨论】：

假设他们都属于[640...1023]，媒体这不只是意味着您测试期间iPad的方向是纵向的吗？（即768x1024 而不是1024x768）。
没有。我遇到的问题是我看到手机和 iPad 使用了相同的媒体查询。我相信他们应该使用不同的媒体查询。
请重新阅读我写的内容。他们可能会使用相同的媒体查询if“iPad 在您的测试期间的方向是纵向的”，因此他们都属于@screenM, @screenL 媒体。至少我看不出他们有任何其他理由。

标签： css less media-queries

【解决方案1】：

试试这样的:)

<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)">

这只是一个例子！

【讨论】：