使用JavaScript判斷手機(jī)瀏覽器是橫屏還是豎屏問題
//判斷手機(jī)橫豎屏狀態(tài): function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("豎屏狀態(tài)!") } if(window.orientation==90||window.orientation==-90){ alert("橫屏狀態(tài)!") } } window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
//移動端的瀏覽器一般都支持window.orientation這個參數(shù),通過這個參數(shù)可以判斷出手機(jī)是處在橫屏還是豎屏狀態(tài)。
從而根據(jù)實際需求而執(zhí)行相應(yīng)的程序。通過添加監(jiān)聽事件onorientationchange,進(jìn)行執(zhí)行就可以了。
在ipad、iphone網(wǎng)頁開發(fā)中,我們很可能需要判斷是橫屏或者豎屏。
下面介紹如何用 jQuery 判斷iPad、iPhone、Android是橫屏還是豎屏的方法
function orient() { if (window.orientation == 90 || window.orientation == -90) { //ipad、iphone豎屏;Andriod橫屏 $("body").attr("class", "landscape"); orientation = 'landscape'; return false; } else if (window.orientation == 0 || window.orientation == 180) { //ipad、iphone橫屏;Andriod豎屏 $("body").attr("class", "portrait"); orientation = 'portrait'; return false; } } //頁面加載時調(diào)用 $(function(){ orient(); }); //用戶變化屏幕方向時調(diào)用 $(window).bind( 'orientationchange', function(e){ orient(); });
屏幕方向?qū)?yīng)的window.orientation值:
ipad: 90 或 -90 橫屏
ipad: 0 或180 豎屏
Andriod:0 或180 橫屏
Andriod: 90 或 -90 豎屏
以上所述是小編給大家介紹的使用JavaScript判斷手機(jī)瀏覽器是橫屏還是豎屏問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
ES6知識點(diǎn)整理之函數(shù)數(shù)組參數(shù)的默認(rèn)值及其解構(gòu)應(yīng)用示例
這篇文章主要介紹了ES6知識點(diǎn)整理之函數(shù)數(shù)組參數(shù)的默認(rèn)值及其解構(gòu)應(yīng)用,結(jié)合實例形式分析了ES6函數(shù)數(shù)組參數(shù)解構(gòu)賦值和默認(rèn)值的設(shè)置相關(guān)操作技巧,需要的朋友可以參考下2019-04-04JavaScript & jQuery完美判斷圖片是否加載完畢
本文主要介紹了JavaScript & jQuery完美判斷圖片是否加載完畢的方法。具有一定的參考價值,下面跟著小編一起來看下吧2017-01-01JS 實現(xiàn)導(dǎo)航欄懸停效果(續(xù)2)
發(fā)現(xiàn)原來的方法還有是有幾個問題:首先Js代碼冗余,導(dǎo)航條上的Tab是用js實現(xiàn)跳轉(zhuǎn)而不是超鏈接,還有導(dǎo)航條本身用fixed定位,但沒有被設(shè)置為水平居中,而是在JS中更改left值使其居中2013-09-09JS高級拖動技術(shù) setCapture,releaseCapture
setCapture 的意思就是設(shè)置一個對象的方法被觸發(fā)的范圍,或者作用域。2011-07-07微信小程序使用picker實現(xiàn)時間和日期選擇框功能【附源碼下載】
這篇文章主要介紹了微信小程序使用picker實現(xiàn)時間和日期選擇框功能,結(jié)合實例形式分析了微信小程序picker組件進(jìn)行日期與時間選擇的相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12JS中的算法與數(shù)據(jù)結(jié)構(gòu)之列表(List)實例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之列表(List),結(jié)合實例形式分析了javascript列表的概念、原理以及定義、添加、刪除、查找等相關(guān)操作技巧,需要的朋友可以參考下2019-08-08js的form表單提交url傳參數(shù)(包含+等特殊字符)的兩種解決方法
下面小編就為大家?guī)硪黄猨s的form表單提交url傳參數(shù)(包含+等特殊字符)的兩種解決方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05