如何用css和js移動端分別判斷手機橫豎螢幕的狀態-css教學-PHP中文網

如何用css和js移動端分別判斷手機橫豎螢幕的狀態

不言

發布： 2018-07-21 10:46:55

原創

2451 人瀏覽過

這篇文章給大家分享的是關於如何用css和js移動端分別判斷手機橫豎屏的狀態，內容很不錯，有需要的朋友可以參考一下，希望可以幫助到大家。

停用使用者自動縮放功能：

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

登入後複製

判斷橫豎螢幕狀態有兩種方法：css判斷、js判斷

(一)、css判斷橫屏還是垂直螢幕

1、寫在同一個css檔案中

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

登入後複製

根據橫豎螢幕設定大小時，正常頁面尺寸常規書寫即可，橫屏樣式單獨設定。即只需在原有樣式基礎上添加橫屏樣式即可，

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

登入後複製

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判斷橫豎螢幕是時時的可無縫銜接，即橫屏載入橫屏樣式，豎屏載入豎屏樣式，

（二）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判斷橫豎螢幕全面。