H5小游戏iphoneX(安全区、刘海)屏幕适配

全屏H5网页和小游戏解决方法

1、方法及其简单，只需在html文件的头部viewport行加入viewport-fit=cover即可。
截图展示如下(因没有H5网页项目，这里暂用cocoscreator代替，但解决方式是一样的。):

可复制粘贴代码如下：

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

普通H5网页iphoneX底部刘海屏适配至此，问题解决完毕。

补充 @半世 2020/10/27
最近又开发了一款放到直播间的全屏小游戏，发现一个奇怪的问题，iphoneX的屏幕适配失败了！！！用的方法跟之前设配成功的方式一样，在index.html里面加入 viewport-fit=cover 。不信邪的我把之前那个适配成功的小游戏，拿出来在ihponeX的设备上再跑一次，发现也失败了！！！做ios同事的同款手机，时而适配成功时而失败。具体解决方式，待寻找解决之道。
追更 @半世 2020/11/09
刚做完一个全屏的小游戏，用了最新的creator版本v2.4.2，因为里面新添加了安全区适配组件SafeArea,悲催的是web端的小游戏使用该组件后并没有起到任何效果，游戏并没有绘制到手机的安全区区域内，随后通过API文档接口，了解到：

个人适配想法

根据半屏小游戏适配成功的经验，web端全屏小游戏的异型屏幕适配，我设想，如果ios原生开发人员将webview的高度增加34pt，并同时将webview位置下移34pt，这样从视觉上可以变相的解决安全区域适配。同理，如果想适配顶部的刘海区域，则可以再将webview高度增加34pt，则游戏的可绘制区域则从视觉上显示为全屏渲染。但，公司开发人员，并不是很想用这种方式，所以这个设想未经实际验证，需要你们去试试，成功了麻烦留言告诉我一下。

追加
以上想法，公司ios开发已验证成功，webview高度增加了3个安全区的高度，即102pt。因苹果屏幕的坐标系远点在左上角，所以webview的位置要往上移动68pt即可。适配后的游戏在安全区域显示如下：

非全屏H5小游戏iphoneX底部安全区适配解决方法

备注：我这里用的是cocoscreator v2.1.2版本

背景

往app直播间内弹半屏性质的小游戏。

解决步骤

1、creator里面勾选Fit Width适配宽度，切记Fit Height适配不要勾选。

2、通过步骤1我们已经解决了小游戏宽度方面的完美适配，下面只要专心解决高度方面的适配即可。

3、其实这个问题也比较简单，在场景创建时，如果设计宽高高度是750X576，那么请加上iphoneX安全区的高度34pt，但是在我们前端要加上68px(原生的2倍)，也就是canvas的宽高更改为750X644。并且，在场景搭建时，尽量给每个节点加上wedget组件，同时选择顶部对齐，就是750X576的设计分辨率去排版即可。场景底部多余出来的68px，只需把背景图拉伸铺满即可，至此前端这边要做的事情就做完了。

4、IOS这边要把app内嵌webview的Iphonex的安全区给关掉，同时弹出的webview高度要是加上安全区的高度来弹即可。这样子，在ihopnex上面显示时，游戏背景会把安全区给铺满，同时在其他机型上会因webview的高度不足和游戏设计时的顶部对齐，而把游戏场景底部多出的68px给自动裁掉显示。
至此，适配完成。