Anpassen von CSS für mobile Geräte: Verständnis der Einschränkungen des @media-Handhelds

Wenn Sie versuchen, 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. Um beispielsweise eine Webseite für ein iPhone zu gestalten:

@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 Medienanfragen](https://www.w3.org/TR/css3-mediaqueries/)
• [Apples Mobile Webkit-Entwickler Leitfaden](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)