Warum ist @media Handheld keine zuverlässige Lösung für mobiles CSS?

CSS für mobile Geräte anpassen: Einschränkungen des @media-Handhelds verstehen

Beim Versuch, CSS speziell für mobile Browser wie iPhone und Android anzupassen, ist es wichtig, sich dessen bewusst zu sein Einschränkungen des @media Handhelds. Obwohl dieser Medienabfragetyp in der Vergangenheit verwendet wurde, wird er auf Mobilgeräten nicht allgemein unterstützt, insbesondere auf solchen mit erweiterten Anzeigefunktionen.

Um den gewünschten Effekt zu erzielen, ziehen Sie alternative Ansätze in Betracht:

Verwenden @media-Bildschirmabfragen

Verwenden Sie anstelle von @media Handheld @media-Bildschirmabfragen. Mit diesen Abfragen können Sie Geräte basierend auf bestimmten Bildschirmeigenschaften wie Auflösung und Gerätebreite gezielt ansprechen. So gestalten Sie beispielsweise eine Webseite für ein iPhone:

@media screen and (max-device-width: 480px) {
  body {
    color: red;
  }
}

Nutzung von CSS-Funktionsabfragen

Alternativ können CSS-Funktionsabfragen verwendet werden, um bestimmte Browserfunktionen zu erkennen. Um beispielsweise zu überprüfen, ob Medienabfragen unterstützt werden:

@supports (media) {
  /* Styles to be applied if media queries are supported */
}

Zielgeräteauflösung

Um Geräte mit bestimmten Auflösungen anzusprechen, können @media-Abfragen mit der Auflösungsmedienfunktion kombiniert werden:

@media screen and (max-device-width: 480px) and (resolution: 163dpi) {
  body {
    color: blue;
  }
}

Weitere Ressourcen

• [W3C-Kandidatenempfehlung für Medien Abfragen](https://www.w3.org/TR/css3-mediaqueries/)
• [Apples Mobile Webkit-Entwicklerhandbuch](https://developer.apple.com/library/archive/documentation/ AppleApplications/Reference/SafariWebContent/GettingStarted/GettingStarted.html)
• [Eine Liste für sich: Entwerfen für mehrere Ansichtsfenster](https://alistapart.com/article/viewports)

Das obige ist der detaillierte Inhalt vonWarum ist @media Handheld keine zuverlässige Lösung für mobiles CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!