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