css - 设备像素比的媒体查询不起作用

Question

我在 LESS 中的媒体查询在桌面上运行良好，但在测试 iPad2 或 Samsung 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;
          }
     }
 }

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

这只是一个例子!