ios屏幕适配

[bosens-China]

这篇文章算是迟来的总结，最近做了一个 h5 项目内嵌到 app 页面内联，默认情况下 app 那边不会做任何处理，也就是顶部和底部需要额外处理一下

做法

默认情况下 ios 的顶部状态栏是20px，如果存在刘海则是44px，当然实际开发中也不需要使用 js 来进行判断，因为 ios11 之后新增了一个安全区域，用来定义可视窗口的范围，它一共有四个属性

• safe-area-inset-left：安全区域距离左边边界距离
• safe-area-inset-right：安全区域距离右边边界距离
• safe-area-inset-top：安全区域距离顶部边界距离
• safe-area-inset-bottom：安全区域距离底部边界距离

使用方法也很简单：

padding-bottom: env(safe-area-inset-bottom);

在html文件的meta中添加

   <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, viewport-fit=cover">

只有设置了viewport-fit=cover，才能使用env，注意上面说的都是竖屏情况

env 第二个参数

上面写法的env和constant其实都支持第二个参数，作为不支持环境的后退，可以作为了解
例如：

/* 不支持就回退到第二个参数 */
padding-bottom: env(safe-area-inset-bottom, 20px);

@supports 额外判断

为了防止部分安卓也使用safe-area-inset-top之类的属性，可以添加-webkit-overflow-scrolling: touch来进行双重判断

-webkit-overflow-scrolling 只有 iOS Safari 支持

@supports (
    (height: constant(safe-area-inset-top)) or
      (height: env(safe-area-inset-top))
  )
  and (-webkit-overflow-scrolling: touch) {
  /* 代码 */
}

fixed 写法

• calc，直接把原来写的值加上安全区域范围

bottom: calc(50px (假设值) + env(safe-area-inset-bottom));

• padding: 添加 padding 的内边距进行填充

padding-bottom: env(safe-area-inset-bottom);

额外注意点

是不是因为上面就说完了，其实还有还有一点兼容的地方需要额外关注

The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.

翻译过来就是ios11.2 之后不再支持constant而是使用env，所以生产过程中可以使用下面写法做兼容

padding-bottom: constant(safe-area-inset-bottom);
/* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom);
/* 兼容 iOS >= 11.2 */

最后

如果对你有帮助可以点一下star

参考文章

• 网页适配 iPhoneX，就是这么简单

• IOS刘海屏H5 CSS适配