成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

番茄西紅柿 / 1598人閱讀

摘要：禁用用戶自動(dòng)縮放功能判斷橫豎屏狀態(tài)有兩種方法判斷判斷一判斷橫屏還是豎屏寫在同一個(gè)文件中豎屏橫屏根據(jù)橫豎屏設(shè)置大小時(shí)，正常頁面尺寸常規(guī)書寫即可，橫屏樣式多帶帶設(shè)置。沒有切換狀態(tài)時(shí)會(huì)不執(zhí)行任何條件判斷，此處不如判斷橫豎屏全面。

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

 

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

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

1、寫在同一個(gè)css文件中 
@media screen and (orientation: portrait) {
  /*豎屏 css*/
} 
@media screen and (orientation: landscape) {
  /*橫屏 css*/
}

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

@media screen and (orientation: landscape) {
  /*橫屏 css*/
}
當(dāng)用戶橫屏?xí)r加載橫屏樣式，豎屏?xí)r取消橫屏樣式即加載默認(rèn)樣式。

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

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

橫屏：

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

豎屏：

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

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

（二）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類名下修改原默認(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)條件判斷。

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

 

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1993.html

相關(guān)文章

  • 更靠譜的橫豎屏檢測(cè)方法

    摘要：毫無疑問，需要使用來監(jiān)聽橫豎屏的變化。其他需要監(jiān)聽橫豎屏的地方只需訂閱一下即可。實(shí)現(xiàn)思路創(chuàng)建包含標(biāo)識(shí)橫豎屏狀態(tài)的特定樣式通過向頁面中注入代碼回調(diào)函數(shù)中獲取橫豎屏的狀態(tài)這里我選擇的節(jié)點(diǎn)作為檢測(cè)樣式屬性。 前不久，做了一個(gè)H5項(xiàng)目，需要在橫豎屏變化時(shí)，做一些處理。毫無疑問，需要使用orientationchange來監(jiān)聽橫豎屏的變化。 方案一： // 監(jiān)聽 orientation chan...

    Richard_Gao 評(píng)論0 收藏0

  • H5打造屬于自己的視頻播放器（JS篇2）

    摘要：回顧算了不回顧了直接搞起，打開中寫的播放視頻播放按鈕隱藏視頻開始播放當(dāng)點(diǎn)擊播放按鈕的時(shí)候，播放按鈕將會(huì)隱藏，播放視頻，這個(gè)不難，在中我們就已經(jīng)實(shí)現(xiàn)。 回顧 算了不回顧了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打開JS1中寫的bvd.js 播放視頻 播放按鈕隱藏 視頻開始播放 當(dāng)點(diǎn)擊播放按鈕的時(shí)候，播...

    sPeng 評(píng)論0 收藏0

  • H5打造屬于自己的視頻播放器（JS篇2）

    摘要：回顧算了不回顧了直接搞起，打開中寫的播放視頻播放按鈕隱藏視頻開始播放當(dāng)點(diǎn)擊播放按鈕的時(shí)候，播放按鈕將會(huì)隱藏，播放視頻，這個(gè)不難，在中我們就已經(jīng)實(shí)現(xiàn)。 回顧 算了不回顧了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打開JS1中寫的bvd.js 播放視頻 播放按鈕隱藏 視頻開始播放 當(dāng)點(diǎn)擊播放按鈕的時(shí)候，播...

    bang590 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<