Wie kann ich iOS-Geräte mithilfe von CSS-Medienabfragen gezielt ansprechen?

iOS-Geräte-Targeting mithilfe von CSS-Medienabfragen

Im Bereich des responsiven Designs wird es notwendig, Webseiten an bestimmte Geräte anzupassen. Ein häufiges Bedürfnis besteht darin, nur iOS-Geräte anzusprechen.

Medienabfrage für iOS-Geräte

Es gibt zwar keine spezielle @media-Abfrage ausschließlich für iOS, aber eine Lösung unter Verwendung der @supports-Regel:

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

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

Prinzip hinter dem Abfrage

Diese Abfrage nutzt die Eigenschaft „-webkit-touch-callout“, die ausschließlich von Safari Mobile auf iOS implementiert wird. Indem wir die Unterstützung prüfen, können wir iOS-Geräte von anderen unterscheiden.

Vorteile und Einschränkungen

• Diese Technik ermöglicht eine präzise Ausrichtung auf iOS-Geräte, ohne andere zu beeinträchtigen Plattformen mit ähnlichen Bildschirmabmessungen.
• Es ist wichtig zu beachten, dass @supports im Internet nicht funktioniert Explorer.
• Obwohl es derzeit auf iOS funktioniert, gibt es keine Garantie, dass Apple die Unterstützung in zukünftigen Versionen nicht auslaufen lässt.

Alternative Ansätze

Die Entwickler-Website von Apple bietet eine umfassende Liste der von Safari auf iOS unterstützten CSS-Eigenschaften. Wenn Sie diese Eigenschaften untersuchen, finden Sie möglicherweise zusätzliche Alternativen für die Ausrichtung auf iOS-Geräte.

Das obige ist der detaillierte Inhalt vonWie kann ich iOS-Geräte mithilfe von CSS-Medienabfragen gezielt ansprechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!