Développement de terminaux mobiles pour gérer les écrans horizontaux et verticaux des appareils mobiles-js tutoriel-php.cn

Développement de terminaux mobiles pour gérer les écrans horizontaux et verticaux des appareils mobiles

巴扎黑

Libérer： 2017-08-12 16:24:48

original

1401 Les gens l'ont consulté

Cet article présente principalement les bases du développement Web mobile - traitant des écrans horizontaux et verticaux des appareils mobiles. L'attribut window.orientation et l'événement onorientationchange ainsi que la méthode de requête multimédia sont deux solutions qui doivent être notées lors du processus. processus de développement. Amis dans le besoin Vous pouvez vous référer à ce qui suit

Afin de faire face à la fragmentation des écrans des appareils mobiles, lorsque nous développons des applications Web mobiles, l'une des meilleures pratiques est d'adopter une mise en page fluide pour garantir que l'espace limité de l'écran soit utilisé au maximum. En raison de la directionnalité de l'écran, une fois que l'utilisateur a changé la direction de l'écran, certains problèmes de conception ou de mise en œuvre deviendront apparents - nous devrons au moins nous occuper de l'adaptation de la largeur de l'élément d'affichage actuel (bien sûr, nous pouvons il faut faire plus que cela). Plusieurs fois, nous devons concevoir des modes d'affichage d'application correspondants pour différentes orientations d'écran. À l'heure actuelle, il est extrêmement important de connaître l'état vertical de l'écran de l'appareil en temps réel.

window.orientation属性与onorientationchange事件

window.orientation : Cet attribut donne l'orientation de l'écran de l'appareil actuel, 0 signifie écran vertical, plus ou moins 90 signifie mode écran horizontal (gauche et droite)
onorientationchange : cet événement de fenêtre sera déclenché à chaque fois que la direction de l'écran change entre les écrans horizontaux et verticaux. L'utilisation est similaire aux événements traditionnels

1 : Utilisez la fonction de rappel de l'événement onorientationchange pour ajouter dynamiquement des balises de corps. Ajoutez un attribut appelé orient et définissez le style correspondant en CSS sous la forme body[orient=landspace] ou body[orient=portrait], afin que différents styles puissent être affichés dans différents modes d'écran. L'exemple de code suivant :

<!Doctype html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;"> 
  <title>横竖屏切换检测</title> 
  <style type="text/css"> 
   body[orient=landscape]{ 
    background-color: #ff0000; 
   } 
 
   body[orient=portrait]{ 
    background-color: #00ffff; 
   } 
  </style> 
 </head> 
 <body orient="landspace"> 
  <p> 
   内容 
  </p> 
  <script type="text/javascript"> 
   (function(){ 
    if(window.orient==0){ 
     document.body.setAttribute("orient","portrait"); 
    }else{ 
     document.body.setAttribute("orient","landscape"); 
    } 
   })(); 
   window.onorientationchange=function(){ 
    var body=document.body; 
    var viewport=document.getElementById("viewport"); 
    if(body.getAttribute("orient")=="landscape"){ 
     body.setAttribute("orient","portrait"); 
    }else{ 
     body.setAttribute("orient","landscape"); 
    } 
   }; 
  </script> 
 </body> 
</html>

Copier après la connexion

2 : Une idée similaire n'est pas implémentée via les sélecteurs d'attributs CSS. L'implémentation du code suivant :

<. 🎜>

<!Doctype html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;"> 
  <title>横竖屏切换检测</title> 
  <style type="text/css"> 
   .landscape body { 
    background-color: #ff0000; 
   } 
 
   .portrait body { 
    background-color: #00ffff; 
   } 
  </style> 
 </head> 
 <body orient="landspace"> 
  <p> 
   内容 
  </p> 
  <script type="text/javascript"> 
   (function(){ 
    var init=function(){ 
     var updateOrientation=function(){ 
      var orientation=window.orientation; 
      switch(orientation){ 
       case 90: 
       case -90: 
        orientation="landscape"; 
        break; 
       default: 
        orientation="portrait"; 
        break; 
      } 
      document.body.parentNode.setAttribute("class",orientation); 
     }; 
 
     window.addEventListener("orientationchange",updateOrientation,false); 
     updateOrientation(); 
    }; 
    window.addEventListener("DOMContentLoaded",init,false); 
   })(); 
  </script> 
 </body> 
</html>

Copier après la connexion

Utiliser la méthode de requête multimédia
Il s'agit d'un moyen plus pratique, en utilisant du CSS pur pour réaliser la fonction correspondante, comme le montre la démonstration de code suivante :

<!Doctype html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;"> 
  <title>横竖屏切换检测</title> 
  <style type="text/css"> 
   @media all and (orientation : landscape) { 
    body { 
     background-color: #ff0000; 
    } 
   } 
 
   @media all and (orientation : portrait){ 
    body { 
     background-color: #00ff00; 
    } 
   } 
  </style> 
 </head> 
 <body> 
  <p> 
   内容 
  </p> 
 </body> 
</html>

Copier après la connexion

Rétrogradation en douceur des navigateurs de version inférieure

Si le navigateur mobile cible ne prend pas en charge la requête multimédia et que window.orientation n'existe pas, nous devons utiliser une autre méthode pour y parvenir - utilisez une minuterie pour comparer le rapport entre la hauteur (window.innerHeight) et la largeur (window.innerWidth) de la fenêtre actuelle en "pseudo temps réel" afin de déterminer l'état actuel de l'écran horizontal et vertical. Comme indiqué dans le code suivant :

<!Doctype html> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;"> 
  <title>按键</title> 
  <style type="text/css"> 
   .landscape body { 
    background-color: #ff0000; 
   } 
 
   .portrait body { 
    background-color: #00ffff; 
   } 
  </style> 
  <script type="text/javascript"> 
   (function(){ 
    var updateOrientation=function(){ 
     var orientation=(window.innerWidth > window.innerHeight)? "landscape" : "portrait"; 
     document.body.parentNode.setAttribute("class",orientation); 
    }; 
 
    var init=function(){ 
     updateOrientation(); 
     window.setInterval(updateOrientation,5000); 
    }; 
    window.addEventListener("DOMContentLoaded",init,false); 
   })(); 
  </script> 
 </head> 
 <body> 
  <p> 
   内容 
  </p> 
 </body> 
</html>

Copier après la connexion

Solution unifiée

En intégrant les deux solutions ci-dessus, une solution multi-navigateurs peut être obtenue, le code suivant :

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!