モバイル端末の横画面・縦画面に対応したモバイル端末の開発-jsチュートリアル-php.cn

モバイル端末の横画面・縦画面に対応したモバイル端末の開発

巴扎黑

リリース： 2017-08-12 16:24:48

オリジナル

1334 人が閲覧しました

この記事では主に、モバイルデバイスの水平画面と垂直画面を扱うモバイル Web 開発の基本を紹介します。window.orientation 属性と onorientationchange イベント、およびメディアクエリメソッドは、開発プロセス中に注意する必要がある 2 つのソリューションです。必要な友達は次を参照してください

モバイルデバイスの画面の断片化に対処するため、モバイル Web アプリケーションを開発するときのベストプラクティスの 1 つは、限られた画面スペースを確実に活用できるようにすることです。可能な限り最大限の範囲で。画面の方向性により、ユーザーが画面の方向を切り替えた後、いくつかの設計または実装の問題が明らかになります。少なくとも、現在の表示要素の幅の適応に対処する必要があります (もちろん、これ以上のことをしなければなりません）。多くの場合、さまざまな画面の向きに対応するアプリケーションの表示モードを設計する必要があります。このとき、デバイスの垂直画面の状態をリアルタイムで把握することが非常に重要です。

window.orientation属性与onorientationchange事件

window.orientation: この属性は、現在のデバイスの画面の向きを示します。0 は垂直画面を意味し、プラスまたはマイナス 90 は水平画面 (左右) モードを意味します

onorientationchange: 画面の向きが水平との間で変わるたびに縦画面切り替え後、この window イベントがトリガーされます。使い方は従来のイベントと同様です

1: onorientationchange イベントのコールバック関数を使用して、orient という属性を body タグに動的に追加します。、 body[orient=landspace] または Body[orient=portrait] メソッドを使用して、CSS で対応するスタイルを定義することで、異なる画面モードで異なるスタイルを表示できます。次のコード例:

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

ログイン後にコピー

2: 同様のアイデアは、CSS 属性セレクターを介して実装されていません: 次のコードの実装計画:

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

ログイン後にコピー

メディアクエリメソッドを使用します
これは、便利な方法として、次のコードのデモに示すように、純粋な CSS を使用して対応する機能を実装できます:

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

ログイン後にコピー

下位バージョンのブラウザのスムーズなダウングレード

ターゲットのモバイルブラウザがメディアクエリをサポートしておらず、window.orientation がサポートしている場合存在しない場合は、別の方法を使用してそれを実現する必要があります。タイマーを使用して、現在のウィンドウの高さ (window.innerHeight) と幅 (window.innerWidth) の比率を「疑似リアルタイム」で比較し、現在の水平および垂直画面のステータス。次のコードに示すように:

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

ログイン後にコピー

統合ソリューション

次のコードに示すように、上記の 2 つのソリューションを統合することで、クロスブラウザソリューションを実現できます:

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

ログイン後にコピー

以上がモバイル端末の横画面・縦画面に対応したモバイル端末の開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。