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 ...