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

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

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

1. <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檔案中

1. @media screen and (orientation: portrait) {
   
2.   /*針對縱向 css去撰寫*/
   
3. }
   
4. @media screen and (orientation: landscape) {
   
5.   /*針對橫向 css*去撰寫/
   
6. }

複製代碼

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

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

複製代碼

橫向

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

複製代碼

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

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

複製代碼

備註：行動裝置的瀏覽器一般都支持window.orientation這個功能參數，通過這個參數可以判斷出該裝置目前是處在橫向還是縱向的視窗狀態。


透過以上的方法 , 大家就可以設計橫向與縱向不同的CSS前端樣貌，甚至是呼叫不同的功能效果囉 !