我可以将@media查询设置为仅定位到Mac设备（Safari浏览器，Ipad和Iphone）

Question

我在Apple设备上的网站渲染时遇到了一些问题。

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

我是否可以设置徽标以仅为Safari用户显示固定宽度，（OSX，Ipad，IPhones）

@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';
 }