引领中国IT教育新模式、新理念、新成效!
WEB前端框架: 电脑版  |  手机H5版  |  手机APP版  |  WEB后端框架:PHP框架
他的提问
他还没有发布过任何技术问题~
他的解答
他还没有解答任何技术问题~
APP混合式开发

iPhoneX上的混合式APP开发,使用viewport-fit=cover适配设备,让界面全屏

2020-08-13 14:07:34 由元铸老师发布
回答1 点赞0 阅读76

iphoneX的“页眉刘海”为相机和其他组件留出了空间,同时在底部也留有可操作区域。但是网页就尴尬了,——被限制在了这样的“安全区域”内,两边会出现一道白条。那如何解决呢?

1个答案, 其中有0个被标为正确答案
我来解答

元铸 老师

于2020年08月13日 14:09:20解答

正确答案
0人点赞

解决的方案是:

1、给body添加一个background;

2、添加viewport-fit=cover

3、创建地图webview时设置style:contentAdjust属性,如下所示:
var wb = plus.webview.create("url","id", {contentAdjust:false});

注:适用于5+APP


下面的meta标签中的viewport-fit参数,可以使页面占满整个屏幕。

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

为了处理这些需求,iOS 11 的 Safari 引入了一些 constant 来处理 viewport-fit=cover 属性。

  • safe-area-inset-top

  • safe-area-inset-right

  • safe-area-inset-left

  • safe-area-inset-bottom

这些值可以应用到 margin、padding 上,也可以应用到绝对定位的 top 或 left 上。下面的可以运用在body{}样式里

padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);

保存对当前提问的修改
收起
注:答案超过50个时,该问题将被锁定不允许再解答。
提交您的解答
收起