CSS メディア クエリで iOS デバイスを具体的にターゲットにするにはどうすればよいですか?

CSS メディア クエリを使用して iOS デバイスをターゲットにする

メディア クエリを使用して iOS デバイスを具体的にターゲットにするには、次のコードを検討してください:

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

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

この手法は、Safari のみに実装されている -webkit-touch-callout プロパティを利用します。 iOS 上のモバイル。このエコシステムの外にあるデバイスはこれらのルールを無視します。

ただし、@supports を使用すると両方のルールセットがスキップされるため、IE との潜在的な互換性の問題が発生しないことに注意することが重要です。さらに、iOS は将来のリリースでこのメカニズムのサポートを中止する可能性があります。

代わりに、ブラウザ間の互換性を実現するために、「iOS の Safari」の「サポートされる CSS プロパティ」にリストされている他のオプションを検討することを検討してください。

以上がCSS メディア クエリで iOS デバイスを具体的にターゲットにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。