wake-up-neo.net

Wie codiere ich CSS-Medienabfragen für ALLE Mobilgeräte und Tablets?

@media only screen and (max-device-width : 640px) {
/* Styles */
}

@media only screen and (max-device-width: 768px) {
/* Styles */
}

Das habe ich bis jetzt. Das PSD-Modell für die mobile Website, an der ich arbeite, ist 640 Pixel breit. Die andere, die Tablet-Version der Site, ist 768px. Ich konnte die Site in meinem Webbrowser nur mit max-width testen, aber jetzt ist es an der Zeit, diese Site auf den Geräten zum Laufen zu bringen, und es wird immer noch die normale Webseite in voller Größe dargestellt. Die beiden obigen Fragen sind meine beste Vermutung. Wohin gehe ich falsch?

25
user1666487

Dies kann mit Level 4-Medienabfragen durchgeführt werden: ( Browser-Support ist ziemlich gut - CaniUse )

Interaktionsmedien-Funktionen

Die Idee hier ist, Geräte auf der Grundlage ihrer Fähigkeiten anzusprechen. (wie gesagt, das size oder resolution des Geräts überprüfen, das dazu neigt, Ziele zu verschieben. 

Die Funktion pointer media fragt die Qualität des vom Gerät verwendeten Zeigermechanismus ab.

Die - hover media - Funktion fragt die Fähigkeit des Benutzers ab, Elemente auf der Seite mit einem bestimmten Gerät zu bewegen.

Um die Frage zu beantworten ...

Mobile Geräte/Tabellen sind ähnlich:

1) Die Genauigkeit des primären Eingabemechanismus des Geräts ist begrenzt.

Dies bedeutet, dass wir die folgende Medienabfrage verwenden könnten:

@media (pointer:coarse) {
    /* custom css for "touch targets" */
}

div {
  width: 400px;
  height: 200px;
  color: white;
  padding: 15px;
  font-size: 20px;
  font-family: Verdana;
  line-height: 1.3;
  background: green;
}
@media (pointer:coarse) { 
  div {
    background: red;
  }
}
<h2>The <a href="https://www.w3.org/TR/mediaqueries-4/#pointer">pointer media feature</a> queries the quality of the pointer mechanism used by the device.</h2>
<div>The background here will be green on 'desktop' (devices with an accurate pointing mechanism such as a mouse) and red on 'mobile' (devices with limited accuracy of primary input mechanism) </div>

Codepen Demo

2) Das primäre Zeige-System kann nicht schweben

Unsere Medienanfrage würde also so aussehen:

@media (hover: none) { 
   /* custom css for devices where the primary input mechanism cannot hover 
   at all or cannot conveniently hover
}

NB: Chrome/Android vor Version 59 erforderte den on-demand-Wert für Hover/Any-Hover-Medienabfragen. Dieser Wert wurde später aus der Spezifikation entfernt und nicht mehr von Chrome benötigt von Version 59 . Um ältere Versionen von Android zu unterstützen, benötigen Sie jedoch die entsprechenden Werte

@media (hover:none), (hover:on-demand) { 
  /* custom css for "touch targets" */
}

div {
  width: 400px;
  height: 150px;
  color: white;
  padding: 15px;
  font-size: 20px;
  font-family: Verdana;
  line-height: 1.3;
  background: green;
}
@media (hover:none), (hover:on-demand){ 
  div {
    background: red;
  }
}
<h2>The <a href="https://www.w3.org/TR/mediaqueries-4/#hover">hover media feature</a> queries the user’s ability to hover over elements on the page</h2>
<div>The background here will be green on 'desktop' (devices which support hover) and red on 'mobile' (devices which don't [easily] support hover ) </div>

Codepen Demo

NB:

Selbst wenn Sie eine Maus an ein Handy/Tablet anschließen, entspricht die Hover-Media-Funktion immer noch none, da der Interaktionsmodus primary Hover nicht unterstützt. 

Wenn wir sekundäre Geräte in Betracht ziehen möchten, könnten wir die Any-Pointer- und Any-Hover-Funktionen verwenden.

Wenn wir möchten, dass mobile Geräte, die mit einem Zeigegerät verbunden sind, als "Desktop" behandelt werden, können wir Folgendes verwenden:

@media (any-hover: hover) { ... }

Extra lesen

23
Danield

Anstatt zunächst bestimmte Breiten zu verwenden oder Orientierungen oder irgendeinen anderen Unsinn durcheinander zu bringen, schlage ich vor, den folgenden Medientag zu verwenden ...

@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
  /* Your touch-specific css goes here */
}
@media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
  /* Your click-specific css goes here */
}

Und wofür verwendest du diese Tags? Um Dinge für Hover & Click vs Touch-Events festzulegen. 

Touch-Geräte, abgesehen von wenigen Geräten in grauen Bereichen oberhalb der angesprochenen, haben eine sehr andere Auflösung als Desktop-Geräte. Nehmen Sie -nicht- vor, um Design-Elemente festzulegen, jedoch Navigationselemente. Einige Pudents mögen weinen, dass ein Wahnsinn mit maximaler Breite vielleicht besser ist, aber es gibt so viele HD-Handys, dass es lächerlich ist, dass die maximale Gerätebreite schnell unbrauchbar wird.

Sie verwenden jedoch sollte Breitenbreitenabfragen. Machen Sie sich jedoch keine Gedanken über die maximale Gerätebreite, sondern nur über die maximale Breite und die minimale Breite. Lassen Sie die oben genannten Tags Ihre Berührung gegen nicht berührende Benutzer adressieren, geben Sie die Adresse für min-width vs max-width basierend auf der Fenstergröße an, und passen Sie Site visuals an. 

Darüber hinaus ist die Verwendung der Ausrichtung zur Bestimmung, ob sie mobil ist oder nicht, einfach dumm, da sogar Monitore in verschiedenen Ausrichtungen angeordnet werden können (ein übliches Setup, das ich für 3-Monitore gesehen habe, ist ein Hochformat-Monitor und Querformat-Monitore. 

Konzentrieren Sie sich in Breitenansichten darauf, Ihre Site auf verschiedene Breiten zu säubern, und ignorieren Sie, auf welche Art von Gerät tatsächlich zugegriffen wird. Stellen Sie einfach sicher, dass Ihr Bildschirm in verschiedenen Größen sauber angezeigt wird. Das ist ein gutes Design, das sowohl für Desktop- als auch für Mobilgeräte gilt. Wenn Ihre Website in einem kleinen Fenster in der oberen linken Ecke des Bildschirms angezeigt wird (oder zur schnellen Ablenkung), während der Großteil ihres Bildschirms anderweitig genutzt wird, sollte dies sowohl für sie als auch für mobile Benutzer gelten kleinere Breiten sind für gebaut. Etwas anderes auszuprobieren, führt schnell zu einem sehr schmerzhaften und selbstzerstörerischen Weg für die Webentwicklung. Für diese kleineren Breiten können Sie Ihre Breiten auf das setzen, was Sie möchten, aber ich möchte ein paar hinzufügen, die ich persönlich mag.

Also alles in allem solltest du so etwas haben ...

@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
    #touch_logo {
       display: inherit;
    }
    #mouse_logo {
       display: none;
    }
  /* Your touch-specific css goes here */
}
@media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
    #touch_logo {
       display: none;
    }
    #mouse_logo {
       display: inherit;
    }
  /* Your click-specific css goes here */
}
@media (min-width: 541px){
  /* Big view stuff goes here. */
}
@media (max-width: 540px) and (min-width: 400px){
  /* Smaller view stuff goes here. */
}
@media (max-width: 399px){
  /* Stuff for really small views goes here. */
}

Vergessen Sie jedoch nicht, Folgendes in den Kopf Ihrer Seite aufzunehmen:

<meta name='viewport' content="width=device-width, initial-scale=1" />

In einigen Fällen kann es immer noch fehlerhaft sein, aber dies sollte kürzer und vollständiger sein als bei vielen anderen Lösungen.

6
liljoshu

Sie haben Ihre wichtigsten Desktopstile im Hauptteil der CSS-Datei (1024px und höher) und dann für bestimmte Bildschirmgrößen:

@media all and (min-width:960px) and (max-width: 1024px) {
  /* put your css styles in here */
}

@media all and (min-width:801px) and (max-width: 959px) {
  /* put your css styles in here */
}

@media all and (min-width:769px) and (max-width: 800px) {
  /* put your css styles in here */
}

@media all and (min-width:569px) and (max-width: 768px) {
  /* put your css styles in here */
}

@media all and (min-width:481px) and (max-width: 568px) {
  /* put your css styles in here */
}

@media all and (min-width:321px) and (max-width: 480px) {
  /* put your css styles in here */
}

@media all and (min-width:0px) and (max-width: 320px) {
  /* put your css styles in here */
}

Dies wird so ziemlich alle verwendeten Geräte abdecken - ich würde mich darauf konzentrieren, das Styling für die Größen am Ende des Bereichs (z. B. 320, 480, 568, 768, 800, 1024) zu erhalten, wie für alle anderen, die sie gerade sind reagiert auf die verfügbare Größe.

Verwenden Sie px auch nicht überall - verwenden Sie Ems oder%

0
Rahi.Shah