，针对手机h5页面遇到的问题做一些记录。1.样式部分1.1基本样式object-fit:fill;//视频填充父元素-webkit-appearance:none;//消除iOS输入框内阴影1.2刘海安全区域由于iphoneX及以后版本的刘海和底部不是一个完整的正方形区域，导致页面显示异常。处理方法是将缺口和底部区域排除在页面之外，使用中间部分，即所谓的安全区域。iphoneX提供的metaheader//可视化窗口完全包含网页内容//网页内容完全覆盖//默认值和contain一样。要想改编刘海屏，就必须要用翻唱模式。安全区涉及四个值safe-area-inset-left//安全区到左边界的距离safe-area-inset-righ//安全区到右边界的距离safe-area-inset-top//安全区域到上边界的距离safe-area-inset-bottom//安全区域到下边界的左右距离一般为0，应该在页面是水平的。与css结合使用的两个函数：env和constant；env必须iOS>=11.2支持，constant只支持iOS<11.2以下使用。比如：如果我们的headtitlenavbar使用position:fixed，则需要改写如下。导航栏{顶部：0;顶部：常量（安全区域插入顶部）；top:env(safe-area-inset-top);/*减去安全区的topmargin*/}我的做法是用position:relative减去margin，内部内容区App用position:absolute与h5通信，定义window下的方法，即可以全局定义。2.2h5与App通信iOS：window.webkit.messageHandlers[约定名称，如项目名称]postMessage(参数)Android：window约定名称，如项目名称（参数）2.3H5页面激活或隐藏状态切换这是一个浏览器原生支持的方法，通过监听状态变化，具体示例如下；consthiddenProperty='hidden'在文档中？“隐藏”：文档中的“webkitHidden”？“webkitHidden”：文档中的“mozHidden”？'mozHidden':null;document.addEventListener('visibilitychange',()=>{if(document[hiddenProperty]){//离开H5时，跳转到原生应用页面，会触发这个//Toast('Thepageishidden');}else{//当用户从原页面经过一系列操作返回到H5时，会触发this//Toast('页面显示');}});3、兼容性处理3.1Android上传图片在Android端的webview中，使用上传图片异常，图片选中后无法回显到页面。解决方案是原生处理，如下链接所示；（Android处理后会使用h5上传图片，会使用相册里的照片代替拍照；虽然不影响使用，但可能会进一步优化）相关链接：AndroidWebViewdoesnotsupportH5inputtype="file"解决方法3.2页面元素显示位置与实际位置有误差场景：当弹出框中的输入框获得焦点时，会弹出手机软键盘，然后键盘收起，弹出框中的按钮或关闭无法点击。当时我误以为是出现了问题，导致页面“卡死”了。后来经过观察和尝试，发现是页面滑动导致的。当软键盘弹出时，会把webview的可见区域往上滚动一定距离，但是当软键盘关闭时，位置没有恢复，导致页面偏移，可以看到变化通过监控scrollY来处理。“卡”的原因是位置发生了变化。这里比较玄学的是实际位置变了，但是按钮显示在正常位置，这也导致一开始没有定位问题。解决方法：监听输入框焦点失去焦点。当失去焦点时（失去焦点时软键盘也关闭），使用window.scrollTo(0,0)使页面回到正常位置。4.其他总结因为前端项目都是用的Vue框架。这里移动端页面UI库，对比mint-ui，最终选择了Vant
