モバイル端末の向き変化の検知と画面の縦横判定をJSとCSSで実装_JavaScriptスキル

方法 1: イベントを使用して、携帯電話の水平画面と垂直画面の切り替えをトリガーします

コードをコピー コードは次のとおりです:

window.addEventListener("方向変更", function() {

// 新しい方向の値を発表します

alert(window.orientation);

}、偽);

方法 2: サイズ変更の監視

コードをコピー コードは次のとおりです:

window.addEventListener("サイズ変更", function() {

// 画面サイズ (内/外幅、内/外高さ) を取得します

}、偽);

CSS は画面が水平か垂直かを決定します

コードをコピー コードは次のとおりです:

/* ポートレート */

@media 画面と (方向:縦) {

/* ポートレート固有のスタイル */

}

/* 風景 */

@media screen and (orientation:landscape) {

/* 風景固有のスタイル */

}

ネイティブの window.matchMedia メソッドを使用すると、リアルタイムのメディア クエリが可能になります。上記のメディア クエリを使用して、直立ビューか水平ビューかを確認できます:

コードをコピー コードは次のとおりです:

var mql = window.matchMedia("(方向: 縦)");

// 一致するものがあれば、垂直ビューになります

if(mql.matches) {

//直立方向

アラート("1")

} else {

//水平方向

アラート("2")

}

//メディアクエリ変更リスナーを追加します

mql.addListener(function(m) {

if(m.matches) {

//直立方向に変更

document.getElementById("test").innerHTML="直立方向に変更";

}

else {

document.getElementById("test").innerHTML="水平方向に変更";

//横向きに変更

}

});