CSS媒体查询仅定位到iOS设备

Question

是否有@media查询仅针对运行iOS的设备？

例如：

@media (min-device-width:320px) and (max-device-width:768px) {
    #nav {
        yada: yada;
    }
}

这还会以这些设备宽度改变Android设备上页面的行为吗？

Answer 1

是的你可以。

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-touch-callout: none) {
  /* CSS for other than iOS devices */ 
}

YMMV。

之所以有效，是因为仅 Safari Mobile 实现了-webkit-touch-callout

请注意，@supports在IE中不起作用。IE将跳过以上两个@support块。

警告：未来几年，iOS可能会在任何新的iOS版本中删除对此的支持。