You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
这篇文章算是迟来的总结,最近做了一个 h5 项目内嵌到 app 页面内联,默认情况下 app 那边不会做任何处理,也就是顶部和底部需要额外处理一下
做法
默认情况下 ios 的顶部状态栏是
20px
,如果存在刘海则是44px
,当然实际开发中也不需要使用 js 来进行判断,因为 ios11 之后新增了一个安全区域,用来定义可视窗口的范围,它一共有四个属性使用方法也很简单:
在
html
文件的meta
中添加env 第二个参数
上面写法的
env
和constant
其实都支持第二个参数,作为不支持环境的后退,可以作为了解例如:
@supports 额外判断
为了防止部分安卓也使用
safe-area-inset-top
之类的属性,可以添加-webkit-overflow-scrolling: touch
来进行双重判断fixed 写法
额外注意点
是不是因为上面就说完了,其实还有还有一点兼容的地方需要额外关注
翻译过来就是
ios
11.2 之后不再支持constant
而是使用env
,所以生产过程中可以使用下面写法做兼容最后
如果对你有帮助可以点一下
star
参考文章
网页适配 iPhoneX,就是这么简单
IOS刘海屏H5 CSS适配
The text was updated successfully, but these errors were encountered: