web移動端全屏滾動頁面的適配問題

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){
    //....
}