HTML5中判斷橫屏豎屏的方法(移動端)
發(fā)布時間：2016-08-04 11:24:02 作者：佚名 
我要評論
我要評論這篇文章主要介紹了HTML5中判斷橫屏豎屏的方法(移動端)的相關(guān)資料,需要的朋友可以參考下
在移動端中我們經(jīng)常碰到橫屏豎屏的問題，那么我們應(yīng)該如何去判斷或者針對橫屏、豎屏來寫不同的代碼呢。
這里有兩種方法：
一：CSS判斷橫屏豎屏
寫在同一個CSS中
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- @media screen and (orientation: portrait) {
- /*豎屏 css*/
- }
- @media screen and (orientation: landscape) {
- /*橫屏 css*/
- }
分開寫在2個CSS中
豎屏
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
橫屏
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
二：JS判斷橫屏豎屏
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- //判斷手機(jī)橫豎屏狀態(tài)：
- window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
- if (window.orientation === 180 || window.orientation === 0) {
- alert('豎屏狀態(tài)！');
- }
- if (window.orientation === 90 || window.orientation === -90 ){
- alert('橫屏狀態(tài)！');
- }
- }, false);
//移動端的瀏覽器一般都支持window.orientation這個參數(shù)，通過這個參數(shù)可以判斷出手機(jī)是處在橫屏還是豎屏狀態(tài)。
屏幕方向?qū)?yīng)的window.orientation值：
ipad,iphone： 90 或 -90 橫屏
ipad,iphone： 0 或180 豎屏
Andriod：0 或180 橫屏
Andriod： 90 或 -90 豎屏
相關(guān)文章
HTML5新標(biāo)簽兼容——> <!--<if lt IE 9><!endif-->
這篇文章主要介紹了HTML5新標(biāo)簽兼容——> <!--<if lt IE 9><!endif--> 的兩種方法,需要的朋友可以參考下2018-09-12- 離線訪問對基于網(wǎng)絡(luò)的應(yīng)用而言越來越重要,這篇文章主要介紹了HTML5 manifest離線緩存的示例代碼的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨2018-08-08
- frame這個標(biāo)簽不知大家注意過沒有,它必須放在frameset中使用,而且經(jīng)常容易和iframe混淆,這里我們就來舉例講解HTML中iframe和frame的區(qū)別,需要的朋友可以參考下2016-05-30
- 這篇文章主要介紹了詳解HTML5中的manifest緩存使用,文中同時介紹了相關(guān)的一些自動化工具,需要的朋友可以參考下2015-09-09
- 這篇文章主要介紹了HTML中iFrame標(biāo)簽的兩個用法,分別是作為彈出層鋪底覆蓋 ,和跨域?qū)懭隿ookie,需要的朋友可以參考下2015-07-09
使用HTML5的Notification API制作web通知的教程
這篇文章主要介紹了使用HTML5的Notification API制作web通知的教程,示例包括需要使用到的相關(guān)CSS以及Javascript代碼,需要的朋友可以參考下2015-05-08- 這篇文章主要介紹了html5觸摸事件判斷滑動方向的實現(xiàn)的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-05
- 長期以來我們一直缺少一個判斷用戶是否正在瀏覽某個指定標(biāo)簽頁的方法。用戶是否去看別的網(wǎng)站了？他們切換回來了么？2014-05-03
HTML5+CSS3實現(xiàn)超酷登錄窗口(自動隱藏默認(rèn)文本及判斷必填字段)
輸入框獲取焦點后會自動隱藏默認(rèn)文本，如果為空會提示必填字段2013-05-21html5中canvas學(xué)習(xí)筆記2-判斷瀏覽器是否支持canvas
判斷瀏覽器是否支持canvas,本人搜集整理了一些使用方法，感興趣的朋友可以了解下2013-01-06
