Wie erkennt man iPhone- und iPad-Geräte mit CSS?

iPhone/iPad mit CSS erkennen: Fehlerbehebung und Lösungen

Die ursprüngliche Frage zielte darauf ab, iPhone- und iPad-Geräte ausschließlich durch CSS-Stil zu erkennen. Ein erster Versuch, eine Lösung mit „@media handheld, nur Bildschirm und (maximale Gerätebreite: 480 Pixel)“ zu implementieren, erwies sich als erfolglos.

Die Lösung:

Um iPhone, iPad und ihre spezifischen Varianten effektiv zu erkennen, ist ein umfassenderer Ansatz erforderlich. Die folgenden CSS-Medienabfragen zielen speziell auf unterschiedliche Bildschirmabmessungen und Pixelverhältnisse von Geräten ab:

iPhone und iPod touch:

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />

iPhone 4 und iPod touch 4G :

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />

iPad:

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

Durch die Einbindung dieser Medienabfragen in Ihr Stylesheet können Sie sicherstellen, dass bestimmte CSS-Stile basierend auf angewendet werden der erkannte Gerätetyp. Dieser Ansatz bietet mehr Flexibilität und ermöglicht es Ihnen, das Erscheinungsbild Ihrer Website oder Anwendung an verschiedene iOS-Geräte anzupassen.

Das obige ist der detaillierte Inhalt vonWie erkennt man iPhone- und iPad-Geräte mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!