很多時候，我們在移動端需要把一整頁的內容展現給使用者，這個時候就需要移動端使用單屏。這篇博文記錄我在寫移動端單屏網頁時遇到的一些坑，供以後開發時參考，相信對其他人也有用。
如果設定了如下css**：
html, body上面的情況只會在頁面本身高度大於螢幕高度時出現（下面要放版權等其它東西）。如果頁面本身高度等於螢幕高度就不會出現。
swiper是業內常用的解決單屏的庫。使用它的時候一定要加入下面兩行**，缺一不可：
html, body單屏通常會伴隨著手指滑動螢幕時切換頁面的操作。但是如果頁面內有滾動條怎麼辦？
有2種解決方法：
設定swiper的slide不能滾動，然後新增乙個導航條來控制滾動。
設定swiper的slide橫向滾動，然後頁面內的滾動是豎向滾動。
那首頁的slide需要豎向滾動怎麼辦？方法是巢狀多個swiper，首頁的swiper使用豎向滾動（首頁內一般沒有滾動條），有滾動條的頁面使用另乙個橫向滾動的swiper。
移動端技術解決方案
1.移動端瀏覽器相容問題 移動端瀏覽器基本以 webkit 核心為主，因此我們就考慮webkit相容性問題。我們可以放心使用 h5 標籤和 css3 樣式。同時我們瀏覽器的私有字首我們只需要考慮新增 webkit 即可 2.移動端公共樣式 移動端 css 初始化推薦使用 normalize.css ...
移動端布局解決方案
flex布局 rem 百分比 px 畫素 絕對單位 pixel pix picture el element 影象元素 百分比 相對單位 相對於父級元素 rem 相對單位 root 根元素 相對於根元素字型大小的倍數 em 相對單位 相對于父元素字型大小的倍數 vh view height 檢視高 ...
移動端布局適配解決方案
以下這段 是用於根據移動端裝置的螢幕解析度計算出合適的根元素的大小 當裝置寬度為375 iphone6 時，根元素font size 100px 依次增大 限制當為裝置寬度大於768 ipad 之後，font size不再繼續增大 scale 為meta viewport中的縮放大小 設定根元素fo...