微信中推送的信息中有一种图文搭配的方式即一张图片的下半部分有段阴影遮罩层,这个遮罩层上还有文字
将微信的截图效果如下:
下面就用一段简单的代码实现此效果
其它的就很简单了,就是相对定位搭配绝对定位
入群需回答验证问题 Sketch 是什么遇群满员请添加其它分群
2017年9月苹果发布了iPhone X机型对于它的“刘海儿”和底部Home Indicator,QQ空间H5也在第一时间做了兼容适配在适配过程中,我们也尝试了这三种方案如下:
客户端直接将webview的安全区域限制在除去安全区域的区域内。页面将展示在下图灰色webview内:
优点:H5前端开发没有任何适配工作量
缺点:页面会限制在客戶端限制的webview区域内,没有满屏效果
优点:对于iPhone X适配,最简单直接有效的方法不会影响到其他iOS机型。
缺点:对于全屏/透顶标题栏/横屏情况都要用不同的css代码进行适配不够灵活。另外如果苹果下一年又发布了类似iPhone X plus这样的机型,适配工作就要重新来过
当设置了viewport-fit=cover,H5页面会覆盖页面安全区域全屏展示但是这样会带来页面元素会被“刘海儿”和底部Home Indicator遮挡问题,所以苹果提供在css中设置constant(safe-area-inset-X)距离来规避遮挡问题
这些在不同webview下会表现不同的值,我们留到后面分析
在了解了以上情况后,大致可以知道如果要适配┅个普通H5页面的顶部时可以在meta标签的viewport属性中加入:
然后在需要的class里面加入:
在iOS11机型上,H5加入viewport-fit=cover后safeArea的值是基于“如果布局接触了非安全区域才会赋值”。所以在不同情况下会有不同表现如下表所示:
这里展示了iPhone8 / iPhone X (iOS11.2)透顶状态栏/透顶标题栏/普通标题栏下打开适配H5的效果圖。
优点:符合标准的适配灵活运用的话,H5在不同webview下打开都可以有完美的展现且考虑了未来机型的适配。
缺点:适配iPhone X时需要同时考虑其他iOS11机型下会不会受到影响
以上只分析竖屏webview下的情况,横屏webview可以自行通过模拟器进行研究接下来介绍一下模拟器的使用。
加入适配代碼后在没iPhone X的情况下,可以通过iPhone X模拟器调试像手机QQ/手机空间里的H5页面,可以通过在模拟器上安装手机QQ/手机空间app然后调用Safari调试。
步驟:在Xcode打开一个空白项目选择iPhoneX模拟器,并点击运行按钮即可
在Xcode上直接编译客户端代码。或者让客户端开发编译一份模拟器版本的.app文件将其拖进运行的模拟器屏幕,应用就成功安装了
安装应用后,在应用里访问H5页面然后打开Safari(需要开启Safari的开发工具),在菜单中选择開发-Simulator-页面地址 就可以用Safari的检查器对其作调试了。(当有多个页面地址将鼠标移至二级菜单的某一个页面地址时,模拟器页面屏幕会有藍色遮罩出现时则是选中了本页面地址)有些时候Safari识别不到模拟器,只需退出Safari点一下模拟器屏幕,再重新打开Safari一般就会出来了
这种方法对于我们要调试线上H5的其他问题、要测试其他iOS设备找不到真机时同样适用。
经过分析使用官方提供的新属性是三种里面较佳的方案,不过使用在适配过程中应当整体考虑所有机型webview的类型及布局、还有横竖屏对contstant(safe-area-inset-X)/env(safe-area-inset-X)值的影响。
微信中推送的信息中有一种图文搭配的方式即一张图片的下半部分有段阴影遮罩层,这个遮罩层上还有文字
将微信的截图效果如下:
下面就用一段简单的代码实现此效果
其它的就很简单了,就是相对定位搭配绝对定位