快捷導(dǎo)航

使用JS判斷移動(dòng)端手機(jī)橫豎屏狀態(tài)

更新時(shí)間：2018年07月30日 09:49:17 作者：小蜜蜂mycc

本文通過(guò)js和cas代碼分別給大家介紹了移動(dòng)端判斷手機(jī)橫豎屏狀態(tài)的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

禁用用戶自動(dòng)縮放功能：

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

判斷橫豎屏狀態(tài)有兩種方法：css判斷、js判斷

(一)、css判斷橫屏還是豎屏

1、寫(xiě)在同一個(gè)css文件中

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

根據(jù)橫豎屏設(shè)置大小時(shí)，正常頁(yè)面尺寸常規(guī)書(shū)寫(xiě)即可，橫屏樣式單獨(dú)設(shè)置。即只需在原有樣式基礎(chǔ)上添加橫屏樣式即可，

@media screen and (orientation: landscape) {
 /*橫屏 css*/
}

當(dāng)用戶橫屏?xí)r加載橫屏樣式，豎屏?xí)r取消橫屏樣式即加載默認(rèn)樣式。

2、分開(kāi)寫(xiě)在兩個(gè)css中，根據(jù)橫豎屏引用不同樣式文件：

根據(jù)橫豎屏引用不同樣式文件

橫屏：

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

豎屏：

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

備注：css判斷橫豎屏是時(shí)時(shí)的可無(wú)縫銜接，即橫屏加載橫屏樣式，豎屏加載豎屏樣式，

（二）js判斷橫屏還是豎屏

//判斷手機(jī)橫豎屏狀態(tài)：
  window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
    if (window.orientation === 180 || window.orientation === 0) { 
      console.log("豎屏");
      $(".codeIg_s").removeClass('vercreen');//取消橫屏樣式
    } 
    if (window.orientation === 90 || window.orientation === -90 ){ 
      console.log("橫屏");
      $(".codeIg_s").addClass('vercreen');//添加橫屏樣式
    } 
  }, false);

備注：橫屏樣式在vercreen類(lèi)名下修改原默認(rèn)樣式，可正常使用，缺點(diǎn)是必須有橫豎屏的切換狀態(tài)才會(huì)觸發(fā)。

如果用戶默認(rèn)是橫屏狀態(tài)時(shí)不會(huì)觸發(fā)橫屏條件判斷，只有用戶從橫屏轉(zhuǎn)為豎屏或者從豎屏轉(zhuǎn)為橫屏?xí)r才會(huì)觸發(fā)相應(yīng)條件判斷。

沒(méi)有切換狀態(tài)時(shí)會(huì)不執(zhí)行任何條件判斷，此處不如css判斷橫豎屏全面。

總結(jié)

以上所述是小編給大家介紹的使用JS判斷移動(dòng)端手機(jī)橫豎屏狀態(tài)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: