wake-up-neo.com

Wie erkenne ich die Geräteorientierung mithilfe von CSS-Medienabfragen?

In JavaScript kann der Orientierungsmodus folgendermaßen ermittelt werden:

if (window.innerHeight > window.innerWidth) {
    portrait = true;
} else {
    portrait = false;
}

Gibt es jedoch eine Möglichkeit, die Ausrichtung nur mit CSS zu erkennen?

Z.B. so etwas wie:

@media only screen and (width > height) { ... }
cssbrowsercss3tabletmedia-queries
134
Francesco

CSS zur Erkennung der Bildschirmausrichtung:

 @media screen and (orientation:portrait) { … }
 @media screen and (orientation:landscape) { … }

Die CSS-Definition einer Medienabfrage lautet http://www.w3.org/TR/css3-mediaqueries/#orientation

384
Richard Schneider
@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */
}

aber es sieht immer noch so aus, als müsstest du experimentieren

32
mistagrooves

Ich denke, wir müssen spezifischere Medienabfragen schreiben. Stellen Sie sicher, dass beim Schreiben einer Medienabfrage keine Auswirkungen auf eine andere Ansicht (Mob, Tab, Desk) auftreten, da dies sonst Probleme verursachen kann. Ich möchte vorschlagen, eine grundlegende Medienabfrage für das jeweilige Gerät zu schreiben, die sowohl die Ansicht als auch eine Orientierungs-Medienabfrage abdeckt, mit der Sie den Code für die gute Praxis spezifizieren können. Wir müssen nicht beide Medienorientierungsabfragen gleichzeitig schreiben. Sie können mein Beispiel unten beziehen. Es tut mir leid, wenn mein Englisch nicht sehr gut ist. Ex:

für Handys

@media screen and (max-width:767px) {

..This is basic media query for respective device.In to this media query  CSS code cover the both view landscape and portrait view.

}


@media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape) {


..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.

}

für Tablette

@media screen and (max-width:1024px){
..This is basic media query for respective device.In to this media query  CSS code cover the both view landscape and portrait view.
}
@media screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){

..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.

}

Desktop

machen Sie nach Ihren Design-Anforderungen genießen ... (:

Danke, Jitu

13
jitu

In Javascript ist es besser, screen.width und screen.height. Diese beiden Werte sind in allen modernen Browsern verfügbar. Sie geben die tatsächlichen Abmessungen des Bildschirms an, auch wenn der Browser beim Starten der App verkleinert wurde. window.innerWidth ändert sich, wenn der Browser verkleinert wird, was auf Mobilgeräten nicht möglich ist, aber auf PCs und Laptops.

Die Werte von screen.width und screen.height ändert sich, wenn das Mobilgerät zwischen Hoch- und Querformat wechselt, sodass der Modus durch Vergleichen der Werte ermittelt werden kann. Ob screen.width ist größer als 1280px, wenn Sie mit einem PC oder Laptop arbeiten.

Sie können einen Ereignis-Listener in Javascript erstellen, um zu erkennen, wann die beiden Werte gespiegelt werden. Die Werte für die Bildschirmbreite im Hochformat sind 320 Pixel (hauptsächlich iPhones), 360 Pixel (die meisten anderen Telefone), 768 Pixel (kleine Tablets) und 800 Pixel (normale Tablets).

0
BlackMagic