1、解決方案一 先判斷是否是蘋果然后判斷監聽可視區域值得變化，變大說明此時為home鍵存在情況，變小則說明出現了底部導航條，根據這個變化改變底部按鈕得padding-bottom值 具體參考：https://blog.csdn.net/yao_1063066968/article ...

一、 流程 設計師以750pt×1334pt尺寸進行設計（當然高度隨內容變化），最后用該尺寸的設計稿進行標注、切圖，前端采用淘寶的開源方案flexible進行適配。 二、 flexible使用方法 Flexible的使用方法非常簡單，只需要引入flexible_css.js ...

適配iPhoneX底部的小黑條 一、場景 由於iPhoneX去掉了物理按鍵，改為了底部小黑條，這就會導致屏幕適配問題，最常見的場景就是底部fixed的元素被阻擋的情況。對於這種問題，我們一般采取css或js的處理方式（適用於h5，小程序）。 二、css適配方案（推薦） 第一步 ...

最近在移動端項目上遇到了底部tab切換被iPhoneX 和 iPhoneX Max 的小黑條影響到的問題，經過多次調試，最終的解決方案如下： 第一步：新增 viweport-fit 屬性，使得頁面內容完全覆蓋整個窗口（千萬不要忘了，不然后面樣式都沒 ...

背景 公司項目開發中，發現iPhoneX上吸底元素存在被小黑條遮擋的問題 原因 在蘋果 iPhoneX 、iPhone XR等機型上，物理Home鍵被取消，改為底部小黑條替代home鍵功能,從而導致吸底元素會被小黑條遮擋覆蓋的問題 解決方案 使用已知底部小黑條 ...

...

由於在iPhonex在狀態欄增加了24px的高度，對於通欄banner規范的內容區域會有遮擋情況。 解決方案：在頁面通欄banner頂部增加一層高度44px的黑色適配層，整個頁面往下挪44px，這種做法雖然不符合蘋果設計規范，可以先以這種方式處理，后續再優化banner設計展現。 對於底部 ...

元素使用如下字體 font-family: -apple-system-font, sans-serif; 　父元素設置 display:flex; display: flex ...