So bestimmen Sie horizontale und vertikale Bildschirme in mobilem HTML5

Im mobilen Endgerät stoßen wir häufig auf das Problem des horizontalen und des vertikalen Bildschirms. Wie sollten wir also unterschiedliche Codes für den horizontalen und den vertikalen Bildschirm beurteilen oder schreiben? Dieser Artikel stellt hauptsächlich die relevanten Informationen zur Beurteilung horizontaler und vertikaler Bildschirme in HTML5 (mobiles Terminal) vor. Ich hoffe, dass er allen helfen kann.

Hier gibt es zwei Methoden:

1: CSS bestimmt horizontale und vertikale Bildschirme

Geschrieben im gleichen CSS

1. @media screen and (orientation: portrait) {   
     /*竖屏 css*/   
   }    
   @media screen and (orientation: landscape) {   
     /*横屏 css*/   
   }

Separat geschrieben in 2 CSSs

Vertikaler Bildschirm

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

Horizontaler Bildschirm

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

2: JS bestimmt horizontalen Bildschirm und vertikalen Bildschirm

1. //判断手机横竖屏状态：   
   window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {   
           if (window.orientation === 180 || window.orientation === 0) {    
               alert('竖屏状态！');   
           }    
           if (window.orientation === 90 || window.orientation === -90 ){    
               alert('横屏状态！');   
           }     
       }, false);

//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。

Der window.orientation-Wert, der der Bildschirmausrichtung entspricht:

ipad,iphone: 90 oder -90 Horizontaler Bildschirm
ipad,iphone: 0 oder 180 vertikaler Bildschirm
Andriod: 0 oder 180 horizontaler Bildschirm
Andriod: 90 oder -90 vertikaler Bildschirm

Verwandte Empfehlungen:

Tatsächlicher HTML5-Kampf und Analyse zur Bestimmung der horizontalen und vertikalen Bildschirmfunktionen des mobilen Endgeräts

Auf jQuery basierender Code zur Bestimmung, ob iPad, iPhone und Android horizontale oder vertikale Bildschirmfunktionen haben_jquery

Die Seite wird zwangsweise horizontal angezeigt

Das obige ist der detaillierte Inhalt vonSo bestimmen Sie horizontale und vertikale Bildschirme in mobilem HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!