CSS媒体查询仅定位到iOS设备 [英] CSS media query to target only iOS devices

问题描述

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

Is there a @media query to target only devices running iOS?

例如:

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

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

Would this also alter the behavior of the page on Android devices with these device widths?

推荐答案

是的，可以.

@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:

It works because only Safari Mobile implements -webkit-touch-callout: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout

请注意，@supports在IE中不起作用. IE将跳过以上两个以上@support块.要了解更多信息，请参见 https://hacks.mozilla.org /2016/08/using-feature-queries-in-css/.因此，建议不使用@supports not.

Please note that @supports does not work in IE. IE will skip both of the above @support blocks above. To find out more see https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/. It is recommended to not use @supports not because of this.

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

这篇关于CSS媒体查询仅定位到iOS设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！