[分享] 移动端适配iPhoneX方案

547 阅读1分钟

对页面进行iPhoneX适配处理教程

  • 在viewport 中添加 viewport-fit=cover 属性 ``
`` * **安全区设置** iOS 11中包含了一个新的CSS函数 env(),以及一组四个预定义的常量:`safe-area-inset-left`, `safe-area-inset-right`, `safe-area-inset-top`和 `safe-area-inset-bottom` ``` body { padding-bottom: env(safe-area-inset-bottom); } ```

image
一般我们只希望 iPhoneX 适配样式,可以配合 @supports 进行css条件判断使用样式:

@supports (bottom: constant(safe-area-inset-bottom)) { 
  div { 
    margin-bottom: constant(safe-area-inset-bottom); 
  } 
} 

拓展阅读 iPhone X的Web设计 这里总结了大家iOS 11,iPhone X 适配问题