Wie ziele ich mit CSS-@media-Abfragen auf iPhone- und Android-Browser ab?

CSS @media Handheld-Unterstützung auf iPhone- und Android-Browsern

Entwickler versuchen möglicherweise, Webseiten für mobile Browser anzupassen CSS @media Handheld-Abfragen, um das Erscheinungsbild der Seite zu ändern. Einige Plattformen, wie zum Beispiel das iPhone über Safari, ignorieren diesen Ansatz jedoch.

Alternativer Ansatz für iPhone und Android

Um diese Einschränkung zu beheben, besteht die empfohlene Lösung darin Verwenden Sie Medienabfragen, die bestimmte Geräteeigenschaften angeben. Der folgende Code veranschaulicht die Ausrichtung auf das iPhone (oder ein beliebiges Gerät mit einer Bildschirmbreite von 480 Pixel oder weniger):

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

Ausrichtung auf Geräte mit höherer Auflösung

Wie bereits erwähnt, Geräte wie das Droid X haben höhere Auflösungen, die von der oben genannten Abfrage möglicherweise nicht erkannt werden. Um auf solche Geräte abzuzielen, können Medienabfragen die physischen Eigenschaften des Geräts überprüfen, z. B. die Auflösung:

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

Zusätzliche Ressourcen

Weitere Einblicke finden Sie im bereitgestellten A List Apart-Artikel und die W3-Empfehlung für Medienanfragen.

Das obige ist der detaillierte Inhalt vonWie ziele ich mit CSS-@media-Abfragen auf iPhone- und Android-Browser ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!