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

CSS メディア クエリを使用した iOS デバイスのターゲット設定

レスポンシブ デザインの領域では、Web ページを特定のデバイスに合わせて調整することが必要になります。一般的なニーズの 1 つは、iOS デバイスのみをターゲットにすることです。

iOS デバイスのメディア クエリ

iOS 専用の @media クエリはありませんが、 @supports ルールを使用したソリューション:

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

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

の背後にある原則クエリ

このクエリは、iOS 上の Safari Mobile によってのみ実装される「-webkit-touch-callout」プロパティを利用します。サポートを確認することで、iOS デバイスを他のデバイスと区別できます。

利点と注意点

• この技術により、他のデバイスに影響を与えることなく、iOS デバイスを正確にターゲットにすることができます。
• @supports はインターネットでは機能しないことに注意してください。 Explorer。
• 現在 iOS で機能しますが、Apple が将来のリリースでサポートを段階的に廃止しないという保証はありません。

代替アプローチ

Apple の開発者 Web サイトでは、iOS の Safari でサポートされる CSS プロパティの包括的なリストを提供しています。これらのプロパティを調査すると、iOS デバイスをターゲットにするための追加の代替手段が見つかる可能性があります。

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