概述

很多時候，我們在移動端需要把一整頁的內容展現給用戶，這個時候就需要移動端使用單屏。這篇博文記錄我在寫移動端單屏網頁時遇到的一些坑，供以后開發時參考，相信對其他人也有用。

安卓對height:100%的兼容

如果設置了如下css代碼：

html, body {height: 100%;
}

那么在安卓瀏覽器上會發生滾動時，body突然增大或減少的情況，這是因為安卓瀏覽器考慮到了系統導航條的問題。這個極大的影響了體驗，解決方法是用js設置body一個固定的值。

swiper

上面的情況只會在頁面本身高度大于屏幕高度時出現（下面要放版權等其它東西）。如果頁面本身高度等于屏幕高度就不會出現。

swiper是業內常用的解決單屏的庫。使用它的時候一定要加入下面兩行代碼，缺一不可：

html, body {position: relative;height: 100%;
}

這是swiper初用者經常忽略的地方。

內滾動與外滾動

單屏通常會伴隨著手指滑動屏幕時切換頁面的操作。但是如果頁面內有滾動條怎么辦？

有2種解決方法：

1. 設置swiper的slide不能滾動，然后添加一個導航條來控制滾動。
2. 設置swiper的slide橫向滾動，然后頁面內的滾動是豎向滾動。

那首頁的slide需要豎向滾動怎么辦？方法是嵌套多個swiper，首頁的swiper使用豎向滾動（首頁內一般沒有滾動條），有滾動條的頁面使用另一個橫向滾動的swiper。

轉載于:https://www.cnblogs.com/yangzhou33/p/9123998.html

總結

以上是生活随笔為你收集整理的移动端单屏解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。