How Can I Target iOS Devices Specifically with CSS Media Queries?

Targeting iOS Devices with CSS Media Queries

To specifically target iOS devices using a media query, consider the following code:

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

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

This technique leverages the -webkit-touch-callout property, which is implemented exclusively in Safari Mobile on iOS. Devices outside of this ecosystem will ignore these rules.

However, it's important to note that using @supports not poses potential compatibility issues with IE, as it skips both rulesets. Additionally, iOS may discontinue support for this mechanism in future releases.

As an alternative, consider exploring other options listed in "Supported CSS Properties" under "Safari on iOS" to achieve cross-browser compatibility.

The above is the detailed content of How Can I Target iOS Devices Specifically with CSS Media Queries?. For more information, please follow other related articles on the PHP Chinese website!