猫猫猫猫
猫猫猫猫
  • 发布:2017-09-30 10:25
  • 更新:2020-08-05 20:21
  • 阅读:12689

xcode9 ios11 沉浸式状态栏适配

分类:HTML5+

使用沉浸式状态栏的同学在升级iOS11以后,发现之前的沉浸式状态栏没有了,变成了一个灰条,于是开始嚷嚷着让官方修改SDK。

在官方做出动作进行通用适配之前,大家也可以自己暂时解决一下:

  • 使用离线打包的同学可以在工程内自行设置contentInsetAdjustmentBehavior为UIScrollViewContentInsetAdjustmentNever。
  • 喜欢native.js的同学也可以直接修改webview对象的contentInsetAdjustmentBehavior属性。
  • 而只会HTML的同学也可以利用一个新的viewport属性进行适配。

下面单独讲一下viewport属性的方式。
需设置viewport-fitcover

具体代码如下如下:

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

切记,还要在css里使用**constant(safe-area-inset-top)**来避开iPhone X的留海,大家可以参考此文章:https://ayogo.com/blog/ios11-viewport/

6 关注 分享
Trust lhyh 前端切图 dipper 骁骑 高司令

要回复文章请先登录注册

小明子

小明子

constant( safe-area-inset-top ) 不生效,老哥
2020-08-05 20:21
9***@qq.com

9***@qq.com

回复 嵪代码 :
请教一下,头部怎么解决的
2019-07-14 15:30
8***@qq.com

8***@qq.com

mark
2019-07-01 12:30
f***@126.com

f***@126.com

回复 骁骑 :
请问原生代码设置的第2步和第3步的代码是加到哪个文件里?
2019-01-07 16:14
高司令

高司令

mark
2018-05-10 23:48
Arliang

Arliang

回复 骁骑 :
新版修复了这个问题,但发现了一个新问题,就是plus.storage.setItem getItem不是及时的了。
测试代码
mui.plusReady(function(){
plus.storage.setItem('hello', 5)
alert(plus.storage.getItem('hello'))
})
2018-03-15 00:54
陈木木

陈木木

设置了 viewport-fit=cover 但是 constant(safe-area-inset-bottom) 这几个变量, 设置怎么没有效果,用的是ophone X测试的,有知道的吗?
2018-02-02 16:20
付楚

付楚

mark
2017-12-19 10:43
胡虎

胡虎

回复 dipper :
你是怎么解决沉浸的?可以分享下吗?
2017-11-28 13:11
1***@qq.com

1***@qq.com

回复 嵪代码 :
请问一下解决了嘛,底部如何通栏显示呢??
2017-11-15 08:58