Kann CSS speziell auf iOS-Geräte abzielen und andere mit ähnlichen Bildschirmgrößen ausschließen?

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

F: Ist es möglich, CSS zu verwenden, um iOS-Geräte gezielt anzusprechen und andere auszuschließen? Geräte mit ähnlichen Bildschirmgrößen?

A: Ja, Sie können a verwenden Kombination von @media-Abfragen und @supports-Regeln, um dies zu erreichen:

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

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

Dieser Ansatz funktioniert, weil nur Safari Mobile, der auf iOS-Geräten verwendete Webbrowser, die Eigenschaft -webkit-touch-callout unterstützt.

Zusätzliche Überlegungen:

• @supports wird von Internet Explorer nicht unterstützt und funktioniert daher möglicherweise nicht auf Geräten mit diesem Browser.
• Chrome und Firefox unter iOS verwenden die WebKit-Rendering-Engine, um sicherzustellen, dass der obige Code auf allen iOS-Geräten funktioniert.
• Es ist wichtig zu beachten, dass Apple möglicherweise die Unterstützung für Folgendes entfernt: webkit-touch-callout in zukünftigen iOS-Versionen.
• Für die Ausrichtung auf bestimmte iOS-Eigenschaften stehen alternative Optionen zur Verfügung, die unter „Unterstützte CSS-Eigenschaften“ aufgeführt sind Seite.

Das obige ist der detaillierte Inhalt vonKann CSS speziell auf iOS-Geräte abzielen und andere mit ähnlichen Bildschirmgrößen ausschließen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!