Css - 具有分解 css iphone 4 及更高版本的目标答案

【问题标题】：Css - Target with factorized css iphones 4 and beyondCss - 具有分解 css iphone 4 及更高版本的目标
【发布时间】：2017-03-23 05:48:30
【问题描述】：

我希望仅针对 iphone 4、5、6 和 6 plus 的 CSS 类我用了这个article，但想知道我是否不能分解这个。事实上，在我看来，前 2 个设备目标（最小宽度 320/最大最大宽度 480 像素和 568 像素，我可以只使用最大的最大宽度并将它们融合到一个声明中。感觉我的代码不够干净，而是重复。

这是我当前的代码：

.example {
  @media 
    //iphone 4
    (min-device-width: 320px) 
    and (max-device-width: 480px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait),
    //iphone 5
    (min-device-width: 320px) 
    and (max-device-width: 568px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait),
    //iphone 6
    (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait),
    //iphone 6+
    (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (-webkit-min-device-pixel-ratio: 3)
    and (orientation: portrait) {
      color: yellow;
 }
}

我可以将上面的代码转换/分解成下面的代码吗？

.example {
  @media 
    //mix iphone 4 and 5 
    (min-device-width: 320px) 
    and (max-device-width: 568pxpx)
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait),
    //iphone 6    
    (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 2)
    and (orientation: portrait),
    //iphone 6+
    (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (-webkit-min-device-pixel-ratio: 3)
    and (orientation: portrait) {
      color: red
 }
}

这是否也意味着某些 android 设备，例如 the Samsung Galaxy 3 的宽度与 iphone 4 (320px) 相同，也会有我的类“示例”应用的红色？

【问题讨论】：

标签： ios iphone css

【解决方案1】：

由于单独使用 CSS 安全地找到目标设备并不容易，因此 head 的 script 标记中的此脚本可能有助于检查用户代理和设备特定测量值。

如果函数通过，它会向html 标签添加一个类iPhone456，您可以在CSS 中使用它来定位那些iPhone 机型上的特定元素。

注意，您可能需要调整正则表达式，但该解决方案会给您一个良好的开端

/* rules for iPhone 4,5,6 */
.iPhone456 div.test {
  color: red;
}

<head>
  <script>
    (function(d,s) {
      /* Set html class if iPhone 4,5,6 */
      if (!!navigator.userAgent.match(/iPhone/i)) {
        var w = s.availWidth, h = s.availHeight;
        if (
          (w === 320 && (h === 480 || h === 568)) ||
          (w === 375 && h === 667) ||
          (w === 414 && h === 736)
        ) {
          d.classList.add('iPhone456');
        }
      }
    })(document.documentElement,screen);
  </script>
</head>
<body>

<div class="test">Should be red on iPhone 4,5,6</div>

</body>

【讨论】：

感谢您的帮助，绝对将我推向了正确的道路。想知道你为什么放 if (!!navigator.userAgent.match(/iPhone/i)) 而不是 if (navigator.userAgent.match(/iPhone/i))。那些是什么双！ ?
@Mathieu 确保你得到一个布尔值...stackoverflow.com/questions/784929/…
不错！事实上，如果你不使用你的!!，在非 iPhone 设备上我得到 js 错误

【解决方案2】：

您的两个代码示例都适用于任何符合要求的手机。

(min-device-width: 320px) and (max-device-width: 568pxpx)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait),`

我不相信您可以以任何方式执行特定于设备的 css，但您可以尝试使用 javascript 获取设备的操作系统。

      navigator.userAgent.match(/iPhone/i)

这是一篇详细介绍它们的使用 article 的文章。据我所知，这种方法不是面向未来的，因为以后可能会为 iPhone 更改 userAgent 字段。

【讨论】：