xcode9 ios11 沉浸式状态栏适配

分类：HTML5+

ios11 沉浸式状态栏

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

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

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

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

具体代码如下如下：

<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 赞关注分享

20 个评论

要回复文章请先登录或注册

1***@qq.com

底部如何通栏呢？？

2017-11-15 08:56

1***@qq.com

绘制的titleNView，怎么适配iphonex呢，去掉顶部黑边。。。

2017-11-07 17:31

阿星蜀黍

马克

2017-11-01 01:25

嵪代码

头部问题是解决了，但底部还是有问题！底部导航使用constant(safe-area-inset-bottom)这个，但每个导航加载的webView，每个webView页面离底部的距离不好算啊！在iPhone X会盖住底部导航！

2017-10-25 15:43

骁骑

感谢 @瞳player 的分享

我们会尽快在原生层处理这个问题，并更新SDK，暂时大家可以采用如下方法处理这个问题

下面提供一下NJS的的设置方法，
在需要沉浸式的那个页面里plusready事件之后执行如下NJS代码。
var web = plus.ios.currentWebview();
var scr = plus.ios.getAttribute(web, "scrollView");
plus.ios.setAttribute(scr,"contentInsetAdjustmentBehavior","0");

下面是原生代码设置
1 在H5WEEngineExport.h头文件中增加属性
@property (nonatomic, readonly, strong) UIScrollView *scrollView;
2 通过PDRCoreAppWindow对象的方法获取要设置沉浸式的页面的PDRCoreAppFrame对象
PDRCoreAppFrame* pFrame = [[pAppHandle appWindow] getFrameByName:@"Main.html"];
3 设置PDRCoreAppFrame对象的scrollView属性的
pFrame.webEngine.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;

2017-10-16 16:44

dipper

多谢大神分享，问题解决了

2017-10-13 18:03