【文章前提】
最近接到乙個需求，是乙個需要在手機端橫屏顯示的滑頁型別的頁面。這個頁面需要相容iphone和安卓，也就是可以不支援wp。
設計圖給的是寬圖，也就是寬度》高度的。但是手機預設情況下，大家都是會選擇豎屏的，或者直接是禁止手機橫屏顯示的，我就是其中這樣的乙個人，同時我發現身邊的人一般都是禁止手機自動選擇螢幕的，因為這樣反而會帶來一些麻煩。所以大多情況下，使用者豎屏顯示。
既然接到了這樣的需求，所以還是要想辦法實現的。
辦法總是比方法多的。
【實踐過程】
因為是第一次來做這樣的適應，所以在這上面做了很多種嘗試。
~~~ 第一種實踐~~~
1、寫乙個css檔案，但是裡面會寫兩個適應的內容。通過@media all and (orientation : landscape)來判斷是橫屏，預設是豎屏的樣式，當遇到橫屏時，橫屏顯示樣式。這個，在後來的實踐中，都是沒有問題的。
2、js，這個問題會比較多。因為橫屏和豎屏所觸發的事件會有一些不同。
比如：橫屏的時候，是這樣的：
豎屏的時候是這樣的：
分析上面這兩張圖，就可以發現，當橫屏的時候，手指滑動是計算movex，的位移也是x軸上的。
而豎屏的時候，是計算movey，的位移是y軸上的。
以上這兩個不同的地方，就需要在程式中判斷不同的旋轉方向了。
第一次的時候，做了兩套js，當螢幕的寬度大於螢幕的高度的時候，判斷是橫屏，載入橫屏的js。當螢幕是豎屏的時候，載入豎屏的js。載入js使用非同步載入的方式。
當使用者旋轉了螢幕，監聽resize事件，發生旋轉的時候，重新整理頁面，這樣在安卓上是完美實現了需求了的。
~~~ 第二種實踐方式~~~
1、css和之前的沒有變化
2、js寫在同乙個檔案中，旋轉螢幕的時候，不進行重新整理操作。
3、代替的方法是通過判斷橫屏還是豎屏，初始化各種引數。包括載入，頁面的寬高等，滑頁的事件。
----問題出現了：
出現重新繫結事件會有一些bug出現。
一怒之下，拋棄之。
~~~ 第三種 ~~~
之前繫結事件都是分開繫結的，比如橫屏是的swipe1，豎屏就是swipe2
第三種方式不是分開了，而是把兩個可能都寫在乙個函式中，然後在函式中通過判斷橫豎屏來選擇相應的操作。
第三種方法就解決了第二種方法的bug。
旋轉螢幕後大概流程是這樣的：
1、重新獲取螢幕的高度和寬度
2、重新設定頁面的寬度和高度
3、重新設定下需要滑動的容器的樣式。
以上就可以了。
而事件的判斷，已經都寫在函式中了，執行的時候會進行判斷是橫屏或者豎屏。
雖然這樣看上去似乎會影響到效能，但是能夠解決bug，也就暫且這樣了。
在這個過程中，發現了乙個問題。
關於UIView的橫豎屏自適應
本文的屬性也不知道是原創還是摘抄了，乙個同事正在學橫豎屏自適應的東西，剛看到用 調整的部分，然後我徒手給實現了用ib實現的方式，估計書上應該都有，只是我沒看吧。簡單來說就兩種方式 實現和ib實現 原理都是通過判斷方向旋轉然後給出相應的調整方式。效果圖 實現 viewcontroller.h prop...
如何實現ios螢幕的橫豎屏自適應
首先在uiviewcontroller的 bool shouldautorotatetointe ceorientation uiinte ceorientation inte ceorientation 方法中設定裝置要支援的deviceorientation 在uiviewcontroller的...
更靠譜的移動端橫豎屏檢測方法
前不久，做了乙個h5專案，需要在橫豎屏變化時，做一些處理。毫無疑問，需要使用orientationchange來監聽橫豎屏的變化。方案一 監聽 orientation changes window.addeventlistener orientationchange function event f...