css3 は携帯電話での画面の水平方向と垂直方向の判断の問題を完全に解決し、ユーザーが招待状をより快適に読めるようにします_html/css_WEB-ITnose

html：

よろしくお願いします^ _^

screen and (orientation:portrait) {

/* css [垂直定義スタイル] */

#cover1{display: none;width: 100%;height: 100%;background-color: #000 ;不透明度:1;位置:絶対;Z インデックス:9999;上:0px ;左:0px;}
#cover1w{表示:なし;幅:70%;高さ:40px;位置:絶対;Z インデックス:10000 ;上: 50%;左: 15%;マージン上: -20px; font-size: 18px;color: #fff;font-weight: 太字;text-align: center;}

}

@media screen and (orientation:landscape) {

/* css[水平定義スタイル] */
#cover1{表示: ブロック;幅: 100%;高さ: 100%;背景色: #000;不透明度: 1;位置: 絶対;z-index: 9999;top: 0px;left: 0px;}

# cover1w{display: block;width: 70%;height: 40px;position:Absolute;z-index: 10000;top: 50%;left: 15%;margin-top: -20px;font-size: 18px;color: #fff;font-weight:older;text-align: center;}

}

/* PC クライアントまたは大画面デバイス: 1280px拡大*/

@media のみ画面と (min-width: 1280px ) {
#cover1{表示: なし;幅: 100%;高さ: 100%;背景色: #000;不透明度: 1;位置: 絶対;z-index: 9999;top: 0px;left: 0px;}

#cover1w{表示: なし;幅: 70%;高さ: 40px;位置: 絶対;z-index: 10000;上: 50%;左: 15%;margin-top: -20px;font-size: 18px; color: #fff;font-weight:older;text-align: center;}

}

その他の参考ソリューション:

ユーザーが画面を回転すると、リスニング メソッドに移動し、window.orientation を使用して現在の画面のステータスを取得します:
0 - 縦画面
90 - 水平画面を反時計回りに回転
-90 - 水平画面を時計回りに回転します
180 - 垂直画面、上下逆にします

ユーザーに Web ページを横向きモードで表示させたくない場合は、デバイスの本文の CSS3 のトランジションで回転を使用できます。ページを垂直に保つための回転時間を監視します。

モバイルデバイス上のページの場合、画面が回転すると、orientationchange イベントが発生します。このイベントのリスナーを body 要素に追加できます:

js ソリューション

今日は、次のような jQuery コードを共有します。横画面を使用するか縦画面を使用するかを決定するのに効果的です。ここでは jQuery メソッドが呼び出されるため、jQuery クラス ライブラリを参照する必要があることに注意してください。 function orient() {
alert('gete');
if (window.orientation == 0 || window.orientation == 180) {
$("body").attr("class", "portrait") ;

Orientation = 'portrait';

return false;

}

else if (window.orientation == 90 || window.orientation == -90) {

$("body").attr("class", "風景");

方向 = '風景';

return false;

}

}

$(function(){

orient();

});

$(window).bind( 'orientationchange ', function(e){
orient();
});




??