Comment déterminer les écrans horizontaux et verticaux dans HTML5 mobile

Dans le terminal mobile, nous rencontrons souvent le problème de l'écran horizontal et de l'écran vertical, alors comment devrions-nous juger ou écrire des codes différents pour l'écran horizontal et l'écran vertical. Cet article présente principalement les informations pertinentes sur la méthode d'évaluation des écrans horizontaux et verticaux en HTML5 (terminal mobile). J'espère que cela pourra aider tout le monde.

Il existe deux méthodes ici :

1 : CSS détermine les écrans horizontaux et verticaux

Écrit dans le même CSS

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

Écrit séparément dans 2 CSS

Écran vertical

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

Écran horizontal

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

2 : JS détermine l'écran horizontal et l'écran vertical

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这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。

La valeur window.orientation correspondant à l'orientation de l'écran :

ipad,iphone : 90 ou -90 Écran horizontal
ipad,iphone : Écran vertical 0 ou 180
Andriod : écran horizontal 0 ou 180
Andriod : écran vertical 90 ou -90

Recommandations associées :

Combat réel et analyse HTML5 pour déterminer les fonctions d'écran horizontales et verticales du terminal mobile

Code basé sur jQuery pour déterminer si l'iPad, l'iPhone et Android sont screen_jquery horizontaux ou verticaux

La page est forcée à être projetée horizontalement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!