HTML5 中判斷螢幕橫向與縱向 (Phonegap APP實用技術)

byadmin 發表於 2015-4-13 17:48:31 , 10422人已閱讀 , 0人回應

在手機、平板等行動裝置中我們經常碰到橫向縱向的問題，那麼我們應該如何去判斷或者針對橫向、縱向來撰寫不同的程式邏輯呢?

可參考以下方法：
首先在head中加入以下程式碼：

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

複製代碼

針對上述viewport標籤有如下說明
1)、content中的width指的是裝置視窗的寬度。

2)、user-scalable=no就一定可以保證頁面不可以縮放嗎？NO，有些瀏覽器不吃這一套，還有一招就是minimum-scale=1.0, maximum-scale=1.0 最大與最小縮放比例都設為1.0就可以了。

3)、initial-scale=1.0 初始縮放比例受user-scalable控制嗎？不一定，有些瀏覽器會將user-scalable理解為用戶手動縮放，如果user-scalable=no，initial-scale將無法生效。

4)、手機頁面可以觸摸移動，但是如果有需要禁止此操作，就是頁面寬度等於屏幕寬度（css撰寫時寬度可採用100％去自動適應寬度），才可以保證頁面不能被移動 , 但有時候你寬度設定了百分百 , 但又不小心設定到了Padding 就又會超過百分百 , 那卷軸又會跑出來了 , 一點小眉角請自行注意。

5)、如果頁面是經過縮小適應屏幕寬度的，會出現一個問題，當文本框被聚焦時，頁面會放大至原來尺寸，還是要儘量比免這種設計方式。

一：使用CSS判斷螢幕橫向與縱向

寫在同一個CSS檔案中

@media screen and (orientation: portrait) {
/*針對縱向 css去撰寫*/
}
@media screen and (orientation: landscape) {
/*針對橫向 css*去撰寫/
}

複製代碼

分開撰寫獨立讀取時的寫法
縱向

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

複製代碼

橫向

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

複製代碼

二：透過JS判斷裝置螢幕方向

//判斷手機方向：
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
if (window.orientation === 180 || window.orientation === 0) {
alert('目前您的螢幕為縱向！');
}
if (window.orientation === 90 || window.orientation === -90 ){
alert('目前您的螢幕為橫向！');
}
}, false);