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:
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!