移動端開發 禁止橫屏

2022-07-28 01:45:11 字數 1182 閱讀 3791

對於移動端的頁面,很多時候是不希望橫屏顯示的,有可能橫屏顯示頁面顯示不全或者影響美觀,也或者其他的方面。

那麼有什麼辦法能解決這一問題呢?

看成品請移步文章最後,。

看效果請點這裡

。下面就簡單講講兩種方法

1. 通過判斷視窗寬高值的比值判斷是否橫屏

對於正常手機螢幕來說,視窗寬度是小於視窗高度的,即 寬度/高度 的值是小於 1 的,那麼如果手機橫屏了呢,視窗原本的寬度變成了高度,原本的高度變成了寬度,此時, 寬高比就大於 1 了。以此來判斷手機是否橫屏。

**如下:

function

rotate ()

else

}window.onload =rotate;

window.onresize = rotate;

但是,對於手機端的頁面 ,一般 window.onload 和 window.onresize 兩個事件都會被占用來做其他的事情,如果想這樣寫,就得在js中穿插 rotate 函式中的**,使**變得不那麼規整。

2. 通過 orientationchange 事件判斷是否橫屏

orientationchange 為html5的新特性,是在使用者水平或者垂直翻轉裝置(即方向發生變化)時觸發的事件,而且這個事件一般不會被占用。

核心**如下:

window.onorientationchange=function

()else

}

我們可以利用這個方法封裝成乙個自執行的js ,只要有用到,直接引用就可以了,很方便有木有

效果圖如下:

**如下:

//

created : 2017.8.21

//author : guozhi_han

//email : [email protected]

(function

rotate()

}if(orientation==90||orientation==-90)

window.onorientationchange=function

();})();

(完)

移動端判斷橫屏豎屏

可能我們在寫移動端專案的時候會有要求或者為了更好的體驗會做橫豎屏檢測,以達到更好的使用者體驗。判斷橫豎屏 var utils delay var detectres document.getelementbyid j detectres var detectdata document.getelem...

移動端如何強制頁面橫屏

最近公司要開發乙個移動端的類網頁遊戲 長按按鈕有個自行車一直騎行,碰到某個國家的地標就彈出該國的相應say hello的tip,要求橫屏顯示,不能豎屏。然而當使用者豎屏開啟時,而且沒開啟手機裡的橫屏模式,還要逼使用者去開啟。這時候使用者早就不耐煩的把你的遊戲關掉了。解決辦法就是在豎屏模式下,寫乙個橫...

禁止Android 橫屏豎屏切換

在android中要讓乙個程式的介面始終保持乙個方向,不隨手機方向轉動而變化的辦法 只要在androidmanifest.xml裡面配置一下就可以了。在androidmanifest.xml的activity 需要禁止轉向的activity 配置中加入android screenorientatio...