建站
咨詢
售后
建站咨詢
新聞中心
為了應對移動設備屏幕的碎片化，我們在開發(fā)Mobile Web應用時，一個最佳實踐就是采用流式布局，保證最大可能地利用有限的屏幕空間。由于屏幕存在著方向性，用戶在切換了屏幕的方向后，有些設計上或實現上的問題就會凸顯——我們至少需要處理一下當前顯示元素的寬度的適配（當然，要做的可能不僅僅是這個）。很多時候，我們需要為不同的屏幕方向來設計對應的應用顯示模式，這個時候，實時地獲知設備的模豎屏狀態(tài)就顯得極為重要。
創(chuàng)新互聯建站專業(yè)為企業(yè)提供鎮(zhèn)遠網站建設、鎮(zhèn)遠做網站、鎮(zhèn)遠網站設計、鎮(zhèn)遠網站制作等企業(yè)網站建設、網頁設計與制作、鎮(zhèn)遠企業(yè)網站模板建站服務，十載鎮(zhèn)遠做網站經驗，不只是建網站，更提供有價值的思路和整體網絡服務。
- window.orientation屬性與onorientationchange事件
window.orientation :這個屬性給出了當前設備的屏幕方向，0表示豎屏，正負90表示橫屏（向左與向右）模式
onorientationchange : 在每次屏幕方向在橫豎屏間切換后，就會觸發(fā)這個window事件，用法與傳統的事件類似
1：使用onorientationchange事件的回調函數，來動態(tài)地為body標簽添加一個叫orient的屬性，同時以body[orient=landspace]或body[orient=portrait]的方式在css中定義對應的樣式，這樣就可以實現在不同的屏幕模式下顯示不同的樣式。如下代碼示例：
橫豎屏切換檢測 內容
2: 類似的思路，不通過CSS的屬性選擇器來實現，如下代碼的實現方案：
橫豎屏切換檢測 內容
- 使用media query方式
這是一種更為方便的方式，使用純CSS就實現了對應的功能，如下代碼演示：
橫豎屏切換檢測 內容
- 低版本瀏覽器的平穩(wěn)降級
如果目標移動瀏覽器不支持media query，同時window.orientation也不存在，則我們需要采用另外一種方式來實現————使用定時器“偽實時”地對比當前窗口的高(window.innerHeight)與寬(window.innerWidth)之比，從而判定當前的橫豎屏狀態(tài)。如下代碼所示：
按鍵 內容
- 統一解決方案
將以上的兩種解決方案整合在一起，就可以實現一個跨瀏覽器的解決方案，如下代碼：
橫豎屏切換檢測 內容
原英文網址：http://davidbcalhoun.com/2010/dealing-with-device-orientation
以上所述是小編給大家介紹的Mobile Web開發(fā)基礎之四--處理手機設備的橫豎屏問題，希望對大家有所幫助！
分享名稱：MobileWeb開發(fā)基礎之四--處理手機設備的橫豎屏問題
分享地址：http://fisionsoft.com.cn/article/gdgjeo.html
