Wie kann man iPhone- und Android-Browser mit CSS-@media-Abfragen gezielt ansprechen?

CSS @media Handheld-Unterstützung für iPhone- und Android-Browser

Die @media Handheld-CSS-Regel zielt auf Handheld-Geräte wie das iPhone und Android ab. Das iPhone unterstützt diese Regel jedoch nicht vollständig, da es CSS auf Augenhöhe mit Desktop-Browsern rendern kann.

Um bestimmte Geräte wie das iPhone anzusprechen, verwenden Sie @media-Abfragen:

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

Diese Abfrage zielt auf Geräte mit einer Bildschirmbreite von 480 Pixel oder weniger ab.

Die meisten Geräte haben jetzt höhere Auflösungen, wie zum Beispiel das Droid X mit einer Auflösung von 854 x 480. Um diese Geräte anzusprechen, überprüfen Sie die physischen Eigenschaften des Geräts mit erweiterten Medienabfragen:

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

Diese Abfrage zielt auf Geräte mit einer Bildschirmbreite von 480 Pixel oder weniger und einer Auflösung von 163 dpi ab.

Weitere Informationen Ausführliche Informationen zur Ausrichtung auf bestimmte Geräte finden Sie in der W3-Kandidatenempfehlung für Medienanfragen.

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