Entwicklung mobiler Endgeräte: Umgang mit den horizontalen und vertikalen Bildschirmen mobiler Geräte-js-Tutorial-php.cn

Entwicklung mobiler Endgeräte: Umgang mit den horizontalen und vertikalen Bildschirmen mobiler Geräte

巴扎黑

Freigeben： 2017-08-12 16:24:48

Original

1393 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich die Grundlagen der mobilen Webentwicklung vorgestellt – der Umgang mit den horizontalen und vertikalen Bildschirmen mobiler Geräte. Das window.orientation-Attribut und das onorientationchange-Ereignis sowie die Medienabfragemethode sind zwei Lösungen, die während des Prozesses beachtet werden müssen Entwicklungsprozess. Freunde in Not Sie können sich auf Folgendes beziehen:

Um mit der Fragmentierung der Bildschirme mobiler Geräte fertig zu werden, besteht eine der Best Practices darin, ein flüssiges Layout zu gewährleisten dass der begrenzte Platz auf dem Bildschirm maximal ausgenutzt wird. Aufgrund der Ausrichtung des Bildschirms werden einige Design- oder Implementierungsprobleme sichtbar, nachdem der Benutzer die Richtung des Bildschirms geändert hat. Wir müssen uns zumindest mit der Anpassung der Breite des aktuellen Anzeigeelements befassen (natürlich können wir das auch tun). müssen mehr tun als nur das). Oftmals müssen wir entsprechende Anwendungsanzeigemodi für unterschiedliche Bildschirmausrichtungen entwerfen. Zu diesem Zeitpunkt ist es äußerst wichtig, den vertikalen Bildschirmstatus des Geräts in Echtzeit zu kennen.

window.orientation属性与onorientationchange事件

window.orientation: Dieses Attribut gibt die Bildschirmausrichtung des aktuellen Geräts an, 0 bedeutet vertikaler Bildschirm, plus oder minus 90 bedeutet horizontaler Bildschirmmodus (links und rechts)
onorientationchange: Dieses Fensterereignis wird jedes Mal ausgelöst, wenn die Bildschirmrichtung zwischen horizontalen und vertikalen Bildschirmen umgeschaltet wird. Die Verwendung ähnelt herkömmlichen Ereignissen

1: Verwenden Sie die Rückruffunktion des onorientationchange-Ereignisses, um Body-Tags dynamisch hinzuzufügen Fügen Sie ein Attribut namens orient hinzu und definieren Sie den entsprechenden Stil in CSS in Form von body[orient=landspace] oder body[orient=portrait], sodass unterschiedliche Stile in verschiedenen Bildschirmmodi angezeigt werden können. Das folgende Codebeispiel:

<!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>

Nach dem Login kopieren

2: Eine ähnliche Idee wird nicht durch CSS-Attributselektoren implementiert. Die Implementierung des folgenden Codes:

<!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>

Nach dem Login kopieren

Medienabfragemethode verwenden
Dies ist eine bequemere Möglichkeit, reines CSS zu verwenden, um die entsprechende Funktion zu erreichen, wie in der folgenden Codedemonstration gezeigt:

<!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>

Nach dem Login kopieren

Reibungsloses Downgrade von Browsern niedrigerer Versionen
Wenn der mobile Zielbrowser keine Medienabfrage unterstützt und window.orientation nicht vorhanden ist, müssen wir eine andere Methode verwenden, um dies zu erreichen – Verwenden Sie einen Timer, um das Verhältnis von Höhe (window.innerHeight) und Breite (window.innerWidth) des aktuellen Fensters in „Pseudo-Echtzeit“ zu vergleichen, um den aktuellen horizontalen und vertikalen Bildschirmstatus zu bestimmen. Wie im folgenden Code gezeigt:

<!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>

Nach dem Login kopieren

Einheitliche Lösung
Durch die Integration der beiden oben genannten Lösungen kann eine browserübergreifende Lösung erreicht werden, der folgende Code:

<!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 supportOrientation=(typeof window.orientation == "number" && typeof window.onorientationchange == "object"); 
 
    var updateOrientation=function(){ 
     if(supportOrientation){ 
      updateOrientation=function(){ 
       var orientation=window.orientation; 
       switch(orientation){ 
        case 90: 
        case -90: 
         orientation="landscape"; 
         break; 
        default: 
         orientation="portrait"; 
       } 
       document.body.parentNode.setAttribute("class",orientation); 
      }; 
     }else{ 
      updateOrientation=function(){ 
       var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait"; 
       document.body.parentNode.setAttribute("class",orientation); 
      }; 
     } 
     updateOrientation(); 
    }; 
 
    var init=function(){ 
     updateOrientation(); 
     if(supportOrientation){ 
      window.addEventListener("orientationchange",updateOrientation,false); 
     }else{  
      window.setInterval(updateOrientation,5000); 
     } 
    }; 
    window.addEventListener("DOMContentLoaded",init,false); 
   })(); 
  </script> 
 </head> 
 <body> 
  <p> 
   内容 
  </p> 
 </body> 
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEntwicklung mobiler Endgeräte: Umgang mit den horizontalen und vertikalen Bildschirmen mobiler Geräte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!