css と js モバイル端末を使用して、それぞれ携帯電話の水平画面と垂直画面の状態を確認する方法-CSSチュートリアル-php.cn

css と js モバイル端末を使用して、それぞれ携帯電話の水平画面と垂直画面の状態を確認する方法

不言

リリース： 2018-07-21 10:46:55

オリジナル

2453 人が閲覧しました

この記事では、CSS と JS モバイル端末を使用して携帯電話の水平画面と垂直画面の状態をそれぞれ確認する方法を説明します。困っている人はぜひ参考にしてください。

ユーザーの自動スケーリング機能を無効にする:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

ログイン後にコピー

画面の水平垂直状態を判定するには、CSS判定、JS判定

(1)、画面が水平か垂直かをCSSで判定する

1の2つの方法があります。 . 同じcssファイルに書きます

@media screen and (orientation: portrait) {  /*竖屏 css*/} 
@media screen and (orientation: landscape) {  /*横屏 css*/}

ログイン後にコピー

横画面と縦画面に合わせてサイズを設定する場合は、通常のページサイズを記述し、横画面のスタイルを個別に設定するだけです。つまり、元のスタイルをベースに横画面スタイルを追加するだけです

@media screen and (orientation: landscape) {
  /*横屏 css*/}
当用户横屏时加载横屏样式，竖屏时取消横屏样式即加载默认样式。

ログイン後にコピー

2. 2つのCSSに分けて記述し、横画面と縦画面に応じて異なるスタイルファイルを参照します:

異なるスタイルを参照する水平画面と垂直画面に応じたファイル

水平画面:

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

ログイン後にコピー

垂直画面:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

ログイン後にコピー

備考: css は、水平画面と垂直画面が常にシームレスに接続できるかどうかを決定します。つまり、水平画面は横画面スタイル、縦画面は縦画面スタイルをロードします

(2) jsは横画面と縦画面をシームレスに接続できるかを決定します

//判断手机横竖屏状态：
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {        if (window.orientation === 180 || window.orientation === 0) { 
            console.log("竖屏");
            $(".codeIg_s").removeClass(&#39;vercreen&#39;);//取消横屏样式        } 
        if (window.orientation === 90 || window.orientation === -90 ){ 
            console.log("横屏");
            $(".codeIg_s").addClass(&#39;vercreen&#39;);//添加横屏样式        }  
    }, false);

ログイン後にコピー

注: 横画面スタイルは正常に使用できます。 vercreen クラス名の下にある元のデフォルトのスタイルを変更することによって 欠点は、トリガーするために水平画面と垂直画面を切り替える必要があることです。

ユーザーがデフォルトで横画面状態に設定している場合、横画面の条件判定はトリガーされません。対応する条件判定は、ユーザーが横画面から縦画面に切り替えたとき、または縦画面から縦画面に切り替えたときにのみトリガーされます。横画面。

切り替え状態がない場合は、横画面、縦画面のCSS判定ほど包括的な条件判定は行われません。