三種檢測(cè)iPhone/iPad設(shè)備方向的方法
更新時(shí)間：2014年04月23日 15:37:31 作者：
這篇文章主要介紹了檢測(cè)iPhone/iPad設(shè)備方向的三種方法,需要的朋友可以參考下
使用meta tag "viewport"
viewport標(biāo)簽包含如下屬性：
為了能自動(dòng)探測(cè)并適配到屏幕寬度，應(yīng)該使用device-with而不是設(shè)定一個(gè)固定值，另外為了避免用戶縮放導(dǎo)致界面超出屏幕，需要設(shè)置maximum-scale，
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
使用javascript腳本
下面的腳本通過(guò)檢測(cè)屏幕寬度來(lái)檢測(cè)方向并調(diào)整方向：
<script type="text/javascript">
var updateLayout = function() {
if (window.innerWidth != currentWidth) {
currentWidth = window.innerWidth;
var orient = (currentWidth == 320) ? "profile" : "landscape";
document.body.setAttribute("orient", orient);
window.scrollTo(0, 1);
}
};
iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 400);
</script>
上述腳本可放在head部分
使用CSS
使用CSS的media query：
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
viewport標(biāo)簽包含如下屬性：
為了能自動(dòng)探測(cè)并適配到屏幕寬度，應(yīng)該使用device-with而不是設(shè)定一個(gè)固定值，另外為了避免用戶縮放導(dǎo)致界面超出屏幕，需要設(shè)置maximum-scale，
復(fù)制代碼 代碼如下:
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
使用javascript腳本
下面的腳本通過(guò)檢測(cè)屏幕寬度來(lái)檢測(cè)方向并調(diào)整方向：
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var updateLayout = function() {
if (window.innerWidth != currentWidth) {
currentWidth = window.innerWidth;
var orient = (currentWidth == 320) ? "profile" : "landscape";
document.body.setAttribute("orient", orient);
window.scrollTo(0, 1);
}
};
iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 400);
</script>
上述腳本可放在head部分
使用CSS
使用CSS的media query：
復(fù)制代碼 代碼如下:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
相關(guān)文章
JS+CSS實(shí)現(xiàn)仿新浪微博搜索框的方法
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)仿新浪微博搜索框的方法,實(shí)例分析了javascript針對(duì)搜索框樣式的控制技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
js 動(dòng)態(tài)生成html 觸發(fā)事件傳參字符轉(zhuǎn)義的實(shí)例
下面小編就為大家?guī)?lái)一篇js 動(dòng)態(tài)生成html 觸發(fā)事件傳參字符轉(zhuǎn)義的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
“return false”之所以被誤用的如此厲害，是因?yàn)樗雌饋?lái)像是完成了我們交給它的工作，瀏覽器不會(huì)再將我們重定向到href中的鏈接，表單也不會(huì)被繼續(xù)提交，但這么做到底有什么不對(duì)呢2013-11-11
這篇文章介紹了JS實(shí)現(xiàn)QQ圖片一閃一閃的效果小例子，有需要的朋友可以參考一下2013-07-07
javascript實(shí)現(xiàn)密碼驗(yàn)證
這篇文章主要介紹了javascript密碼驗(yàn)證的實(shí)現(xiàn)方法，過(guò)程很簡(jiǎn)單具有一定的參考價(jià)值，適合初學(xué)者學(xué)習(xí)研究，感興趣的小伙伴們可以參考一下2015-11-11
微信小程序?qū)崿F(xiàn)的picker多級(jí)聯(lián)動(dòng)功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的picker多級(jí)聯(lián)動(dòng)功能,結(jié)合實(shí)例形式分析了微信小程序picker組件使用及wx.request后臺(tái)交互相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
JS加ASP二級(jí)域名轉(zhuǎn)向的代碼...2007-05-05
用javascript實(shí)現(xiàn)計(jì)算兩個(gè)日期的間隔天數(shù)
用javascript實(shí)現(xiàn)計(jì)算兩個(gè)日期的間隔天數(shù)...2007-08-08
用javascript實(shí)現(xiàn)li 列表數(shù)據(jù)隔行變換背景顏色
客戶端效果，效率自然不錯(cuò)。以前的做法是偶數(shù)行時(shí)給li加一個(gè)class,方法當(dāng)然不可取，如果后臺(tái)讀取再加class就很麻煩了，看看這個(gè)效果2007-08-08
小程序的openid相當(dāng)重要,它是用戶的唯一標(biāo)識(shí)id,牽扯的支付,登錄,授權(quán)等,下面這篇文章主要給大家介紹了關(guān)于微信小程序獲取用戶openid的相關(guān)資料,需要的朋友可以參考下2022-04-04