css - 我可以将@media 查询设置为仅针对 Mac 设备(Safari 浏览器、Ipad 和 Iphone)吗？

Question

我的网站在 Apple 设备上呈现时遇到一些问题。

我知道 -webkit 可以添加到 CSS 中进行更改。但是前缀是否强大到足以覆盖布局和关键内容？

我可以为 Safari 用户(OSX、Ipad、iPhone)设置一个固定宽度的标志吗

@media (min-width: 320px) and (max-width: 475px)
{
.logo {
width: 75%;
-webkit-width: 200px;
}
}

Answer 1

不，媒体查询针对的是浏览器观察到的媒体属性，而不是其平台。

然而，您可以在 Javascript 中查询 navigator 对象，并以这种方式向 DOM 添加其他类，例如:

if(navigator.userAgent.match(/ip(ad|od|hone)/i))
    document.body.className += ' ios';

在此之后你可以例如:

 body.ios header:after {
   content:'Apple blahblah';
 }