三種檢測(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腳本
下面的腳本通過檢測(cè)屏幕寬度來檢測(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腳本
下面的腳本通過檢測(cè)屏幕寬度來檢測(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)文章
JavaScript閉包的深度剖析與實(shí)際應(yīng)用小結(jié)
本文詳細(xì)探討了JavaScript閉包的概念、作用、原理及優(yōu)缺點(diǎn),閉包允許函數(shù)訪問其詞法作用域中的變量,即使外部函數(shù)已執(zhí)行,閉包有助于解決全局變量污染問題,提供私有變量和方法,但也會(huì)導(dǎo)致內(nèi)存占用和內(nèi)存泄露,通過示例,展示了閉包的實(shí)現(xiàn)和應(yīng)用場(chǎng)景,感興趣的朋友一起看看吧2025-01-01
這篇文章介紹了比較新舊兩個(gè)數(shù)組值得增加和刪除的JS代碼，有需要的朋友可以參考一下2013-10-10
腳本合并可以有效提升javascript性能，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-02-02
JavaScript中null和undefined的區(qū)別詳解
null 是一個(gè)原始值,表示“無”或“空值”,它通常用于指示變量應(yīng)有的對(duì)象或值不存在,undefined 是一個(gè)原始值,表示“未定義”,本文給大家詳細(xì)介紹了JavaScript中null和undefined的區(qū)別,需要的朋友可以參考下2024-10-10
js中數(shù)組結(jié)合字符串實(shí)現(xiàn)查找(屏蔽廣告判斷url等)
這篇文章主要介紹了js中數(shù)組結(jié)合字符串實(shí)現(xiàn)查找(屏蔽廣告判斷url等),需要的朋友可以參考下2016-03-03
以下是平時(shí)收集的幾個(gè)常用代碼段，大多數(shù)是從網(wǎng)上搜集而來。也均為未找到是誰(shuí)誰(shuí)原創(chuàng)，是否允許轉(zhuǎn)載等要求， 所以如果看到的朋友發(fā)現(xiàn)其中有些代碼是自己寫的，還請(qǐng)?jiān)徳谙罗D(zhuǎn)帖出來2011-11-11
IE中jscript/javascript的條件編譯...
2006-09-09 
JS判斷空對(duì)象的幾個(gè)方法大盤點(diǎn)
在做數(shù)據(jù)交互的時(shí)候,我們經(jīng)常需要判斷數(shù)據(jù)或者對(duì)象是不是為空,避免當(dāng)接口異常時(shí)候前端頁(yè)面崩潰,下面這篇文章主要給大家介紹了關(guān)于JS判斷空對(duì)象的幾個(gè)方法,需要的朋友可以參考下
2022-02-02 
這篇文章主要為大家介紹了Web?Woker常見使用問題及方案解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-09-09