概述

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

安卓對height:100%的兼容

如果設(shè)置了如下css代碼：

html, body {height: 100%;
}

那么在安卓瀏覽器上會發(fā)生滾動時，body突然增大或減少的情況，這是因?yàn)榘沧繛g覽器考慮到了系統(tǒng)導(dǎo)航條的問題。這個極大的影響了體驗(yàn)，解決方法是用js設(shè)置body一個固定的值。

swiper

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

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

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

這是swiper初用者經(jīng)常忽略的地方。

內(nèi)滾動與外滾動

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

有2種解決方法：

1. 設(shè)置swiper的slide不能滾動，然后添加一個導(dǎo)航條來控制滾動。
2. 設(shè)置swiper的slide橫向滾動，然后頁面內(nèi)的滾動是豎向滾動。

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

轉(zhuǎn)載于:https://www.cnblogs.com/yangzhou33/p/9123998.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。