js/css検出移動機器方向の変化判断縦横画面

最近やっているサイトは、パソコンの各ブラウザにアクセスしたり、ipadにアクセスしたり、ipadにはいくつかの種類があり、縦画面の違いもあり、考慮すべきことはたくさんあります.縦横画面を区別するコードをいくつか示します.
方法1:携帯電話の横画面と縦画面の切り替えをトリガーするイベント
 

window.addEventListener("orientationchange", function() {  

  

//           

  

alert(window.orientation);  

  

}, false); 

　　
//方法2:サイズ変更の傍受
 
 

/* portrait */  

  

@media screen and (orientation:portrait) {  

  

/* portrait-specific styles */  

  

}  

  

/* landscape */  

  

@media screen and (orientation:landscape) {  

  

/* landscape-specific styles */  

  

}  

　　
 
css判断縦横画面

/* portrait */  

  

@media screen and (orientation:portrait) {  

  

/* portrait-specific styles */  

  

}  

  

/* landscape */  

  

@media screen and (orientation:landscape) {  

  

/* landscape-specific styles */  

  

}  

　　
 
 
ローカルwindowmatchMediaメソッドでは、リアルタイムメディアクエリーを許可します.上記のメディアクエリーを使用して、直立または水平の視点にあることを確認できます.

var mql = window.matchMedia("(orientation: portrait)");

//      ，         

if(mql.matches) {  

//     

alert("1")

} else {  

//    

alert("2")

}  

//              

mql.addListener(function(m) {

if(m.matches) {

//        

document.getElementById("test").innerHTML="       ";

}

else {

document.getElementById("test").innerHTML="       ";

//        

}

});