1.問題說明
????近日接到頁面全屏滾動的需求，內容為：一張圖片，一段文字以及固定在屏幕下方的按鈕，如圖所示：
根據設計稿尺寸寫好頁面布局，在大多數手機尺寸中都是適配的，個別手機及ipad會出現問題，以下特例說明：
????<1> iphone X（375812）中，fixed定位的按鈕即紅色區域會與上方內容之間存在一段較長的空白，影響美觀。
????<2> ipad(7681024 / 1024*1366)中，紅色按鈕區域會覆蓋上方的部分內容，需做調整。
????注：以上尺寸只是個別不代表全部，適配的思想是一樣的。

2.思路解析
????使用css3的媒體查詢，單純的根據設備寬或高來寫適配的話，試了試并不合適做此工作，比較復雜，無法將設備分類。后來想到使用js計算設備的寬高比，以此來分類。然后在搜索寬高比的時候，不經意間看到css3的媒體查詢就有寬高比: 兩值必須為正整數

@media screen and (max-aspect-ratio: 3/4){//.... } @media screen and (min-aspect-ratio: 9/16){//.... }

3.解決問題
????找到ios&Android大部分機型尺寸，如下表(來自網絡，僅供參考。更多請轉 https://www.cnblogs.com/sunshq/p/5695102.html )：
| 機型 | 尺寸 | 點(Point) | 寬高比（去尾）
| ------ | ------ | ------ |
| iPhone4s | 3.5英寸 | 320 * 480 | 0.66
| iPhoneSE | 4.0英寸 | 320 * 568 | 0.56
| iPhone6 | 4.7英寸 | 375 * 667 | 0.56
| iPhone6s | 4.7英寸 | 375 * 667 | 0.56
| iPhone7 | 4.7英寸 | 375 * 667 | 0.56
| iPhone6P | 5.5英寸 | 414 * 736 | 0.56
| iPhone6sP | 5.5英寸 | 414 * 736 | 0.56
| iPhone7P | 5.5英寸 | 414 * 736 | 0.56
| iPhone X | 5.8英寸 | 375 * 812 | 0.46
| iPadPro | 9.7英寸 | 768 * 1024 | 0.75
| iPadPro | 12.9英寸 | 1024 * 1366 | 0.75
| | |
| 三星Note5 | 5.7英寸 | 480 * 854 | 0.56
| Nexus 5 | 4.95英寸 | 360 * 640 | 0.56
| 華為MT1-U06 | 6.1英寸 | 480 * 720 | 0.66
| LG G3 | 5.5英寸 |720 * 1080| 0.66
| 三星galaxy s4 | 5英寸 | 540 * 960 | 0.56

切換尺寸查看頁面情況，發現需要修改的地方寫在對應的媒體查詢里，以此達到預期效果。

@media screen and (max-aspect-ratio: 56/100){//.... } @media screen and (min-aspect-ratio: 7/10){//.... }

轉載于:https://www.cnblogs.com/shenmissing/p/9871142.html

總結

以上是生活随笔為你收集整理的web移动端全屏滚动页面的适配问题的全部內容，希望文章能夠幫你解決所遇到的問題。

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