So passen Sie CSS für mobile Geräte an: Ist @media handheld immer noch relevant?

CSS-Anpassung für mobile Geräte:

Viele Webentwickler stehen vor Herausforderungen, wenn sie CSS für Handheld-Geräte wie iPhones und Android-Telefone anpassen. Die herkömmliche Methode zur Verwendung von @media Handheld funktioniert nicht einheitlich auf allen Geräten.

Lösung: Verwenden Sie @media-Abfragen

Um diese Einschränkung zu überwinden, verwenden Sie @media-Abfragen. Mit dieser CSS-Technik können Sie auf bestimmte Geräteeigenschaften abzielen, einschließlich der Bildschirmgröße:

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

Diese Abfrage zielt speziell auf Geräte mit einer maximalen Bildschirmbreite von 480 Pixel ab, was üblicherweise iPhones abdeckt.

iPhone als Ausnahme

iPhone-Browser, die auf Safari basieren, unterstützen @media Handheld aufgrund ihrer erweiterten CSS-Rendering-Funktionen nicht. Dies kann bei älteren iOS-Versionen variieren.

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

Einige neuere Mobilgeräte, wie z. B. das Droid X, verfügen über höhere Auflösungen. Um diese Geräte zu berücksichtigen, verwenden Sie spezifischere @media-Abfragen, die die Bildschirmauflösung berücksichtigen:

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

Weiterführende Literatur:

• [Eine Liste für sich: Medienabfragen für Responsive Web Design](https://alistapart.com/article/responsive-web-design)
• [W3C-Kandidat Empfehlung für Medienabfragen](https://www.w3.org/TR/css3-mediaqueries/)

Das obige ist der detaillierte Inhalt vonSo passen Sie CSS für mobile Geräte an: Ist @media handheld immer noch relevant?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!