Wie kann ich iPhones und iPads mithilfe von CSS-Medienabfragen erkennen?

iPhone/iPad-Geräteerkennung mit CSS

Um die Benutzererfahrung zu optimieren und maßgeschneiderte Inhalte bereitzustellen, suchen Webentwickler häufig nach Erkennungsmethoden spezifische Geräte ausschließlich über CSS. Ein solcher Ansatz besteht darin, mithilfe von Medienabfragen zwischen iPhones und iPads zu unterscheiden.

Ansatz für Medienabfragen

Die im vorhandenen Thread vorgeschlagene Lösung schlägt die Verwendung der @media-Regel zusammen mit vor die Parameter Handheld und (max-device-width: 480px). Diese Technik liefert jedoch möglicherweise nicht die gewünschten Ergebnisse.

Alternative Lösung

Um dieses Problem anzugehen, ist ein umfassenderer Ansatz erforderlich. Durch die Nutzung spezifischer Medienabfragen kann man iPhones, iPads und deren Variationen effektiv ansprechen.

iPhone und iPod Touch

Um iPhones und iPod Touch-Geräte zu erkennen, verwenden Sie die folgende Medienabfrage:

@media only screen and (max-device-width: 480px) {
  /* Styles for iPhone & iPod Touch */
}

iPhone 4 & iPod Touch 4G

Verwenden Sie für die Modelle iPhone 4 und iPod Touch 4G die folgende Medienabfrage:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles for iPhone 4 & iPod Touch 4G */
}

iPad

Um iPads zu identifizieren , verwenden Sie die folgende Medienabfrage:

@media only screen and (max-device-width: 1024px) {
  /* Styles for iPad */
}

Das obige ist der detaillierte Inhalt vonWie kann ich iPhones und iPads mithilfe von CSS-Medienabfragen erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!