it-swarm.com.de

Unterstützen iPhone/Android-Browser CSS @media Handheld?

Ich möchte mein Webseiten-CSS für Webbrowser ändern, die auf Mobiltelefonen wie iPhone und Android laufen. Ich habe so etwas in der CSS-Datei versucht:

@media handheld {
  body {
    color: red;
    }
  }

Aber zumindest auf dem iPhone scheint es keine Wirkung zu haben. Wie kann ich mein CSS so schreiben, dass es auf dem iPhone usw. anders funktioniert, am besten ohne Javascript?

47
Colen

Von dieser Seite gibt es einige andere Medienanfragen, die für die Ausrichtung auf iPhones/Android-Telefone hilfreich sind:

    // target mobile devices
@media only screen and (max-device-width: 480px) {
    body { max-width: 100%; }
}

// recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    // CSS goes here
}

// should technically achieve a similar result to the above query,
// targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi)
@media only screen and (min-resolution: 300dpi) {
    // CSS goes here
}

Ich konnte die Medienabfrage mit maximaler Gerätebreite erfolgreich verwenden, um Android-Handys erfolgreich anzusprechen, obwohl ich die Breite bis zu 800px anpassen musste, anstatt der aufgelisteten 480. Für das iPhone 4 funktionierte das -webkit-min-Gerät-Pixel-Verhältnis, um das iPhone4 anzusprechen (max-Gerätebreite: 480px nicht; ich nehme an, dass das iPhone3 als Ziel verwendet wird, aber es war kein praktisches Testobjekt vorhanden.)

Ich kann sehen, dass dies ziemlich chaotisch wird, aber wenn Sie eine Vielzahl von Geräten unterstützen müssen und für jedes von ihnen ein benutzerdefiniertes CSS vorhanden ist, werden die Medienanfragen unterstützt, da es möglich ist, das zu tun, was Sie tun müssen, um jede Plattform zu optimieren . Und ja, ich würde zuerst Standards schreiben, so dass möglichst viele CSS-Werte wiederhergestellt werden können. Häufig sprechen wir jedoch davon, alternative Layouts zu präsentieren, deren Größe für die verwendeten Geräte angemessen ist.

29
LocalPCGuy

@media handheld bezieht sich nur auf die uralten winzigen proto-html-Handys aus vergangenen Jahren, die keine Webseiten anzeigen konnten. Die ePUB-, MOBI-, Tablet-Community von Anbietern sagte alle nachdrücklich: "Nein, wir sindnicht@media handheld-Geräte!" denn sie hatten zu Recht die Befürchtung, dass dies für immer in einem Niemandsland landen würde, das "echten" Webseiten unterworfen ist.

Mit den heutigen kleinen Geräten mit sehr hoher Auflösung haben wir immer noch keine gute Möglichkeit, HTML mitzuteilen, wie Dinge auf großen Displays mit relativ niedriger Auflösung "richtig" angezeigt werden, im Gegensatz zu kleinen Displays mit sehr hoher Auflösung. Und als zertifizierter alter Furz möchte ich Sie mit den Augen daran erinnern, dass die Antwort nicht darauf besteht, dass alles, einschließlich Schriftarten, 2X kleiner wird.

19
Jim Adcock

Nein, weder iPhone- noch Android-Browser unterstützen CSS @media handheld.

5

Schauen Sie sich die Medienabfrage 'hover' an.

Fügen Sie dies in Ihre SCSS-Datei ein:

// At this point the CSS would target screens above 990px - but only
// if they support hover (i.e. laptops, PC's etc).
$point-at-which-use-large-screens: (min-width 990px) (hover hover);

.some-class-you-want-to-target {

  // Some CSS to only apply to larger screens with mouse available.
  @include breakpoint($point-at-which-use-large-screens) {
    color: red;
  }
}

Nach dem Ausführen von grunt usw. auf dem SCSS wird CSS erzeugt, das wie folgt aussieht:

@media (min-width: 991px) and (hover: hover) {
  color:red;
}
0
bailey86