Heim > Web-Frontend > CSS-Tutorial > So passen Sie CSS für mobile Geräte an: Ist @media handheld immer noch relevant?

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

DDD
Freigeben: 2024-11-26 17:15:10
Original
320 Leute haben es durchsucht

How to Customize CSS for Mobile Devices: Is @media handheld Still 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)" />
Nach dem Login kopieren

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)" />
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage