App内嵌webview踩坑

为移动端h5页面遇到的问题做些记录

一、样式部分

  • 1.1 基本样式

 object-fit:fill; //video铺满父元素
 -webkit-appearance:none; //消除iOS输入框的内阴影
  • 1.2 刘海屏安全区域

由于iphoneX以后的版本刘海屏和底部不是完整的方型区域,造成页面显示异常。处理方式是页面将刘海屏和底部的区域排除在外使用中间部分,即所谓的安全区域。
iphoneX提供的meta头
<meta name="viewport" content="viewport-fit=contain"> //可视化窗口完全包含网页内容
<meta name="viewport" content="viewport-fit=cover"> //网页内容完全覆盖
<meta name="viewport" content="viewport-fit=auto"> //默认值和contain一样

如果要适配刘海屏必须要使用cover的模式

安全区域涉及四个值

safe-area-inset-left //安全区域距离左边边界距离
safe-area-inset-righ //安全区域距离右边边界距离
safe-area-inset-top //安全区域距离顶部边界距离
safe-area-inset-bottom //安全区域距离底部边界距离

左右距离一般为0,应该是页面横屏是才会用到
两个在css配合使用的函数:envconstantenv必须iOS>=11.2才支持,constant相反在iOS<11.2版本下使用。
例如:如果我们的头部标题navbar使用position:fixed的时候需要改写成如下

.navbar{
    top:0;
    top:constant(safe-area-inset-top);
    top:env(safe-area-inset-top);/* 减去安全区域上边距 */
}

我的处理方式是使用position:relative减掉边距,内部内容区域使用position:absolute
相关链接:h5 在全屏iphonex中的适配

二、交互部分

  • 2.1 App向h5通信

将方法定义在window下,即定义成全局即可

  • 2.2 h5向App通信

iOS: window.webkit.messageHandlers[约定的名称,如项目测名称]postMessage(参数)
Android:window约定的名称,如项目测名称 (参数)

  • 2.3 h5页面活跃或隐藏状态切换

这个是浏览器原生支持的方法,通过监听状态变化,具体例子如下;

const hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null;
document.addEventListener('visibilitychange', () => {
  if (document[hiddenProperty]) {
    //当离开H5 跳转到app原生的页面时,这里会被触发
    // Toast('页面隐藏了');

  } else {
    //当从原生页面用户一系列操作后,返回H5的时候,这里会被触发
    // Toast('页面展示了');
  }
});

三、兼容性处理

  • 3.1 安卓上传图片

安卓端的webview,使用<input type='file'>上传图片异常,选中图片后无法回显到页面。解决方法是原生处理,如下链接;(处理完后安卓使用h5上传图片会使用相册的照片而不会有拍照选项;这里虽然不影响使用,或许可以进一步优化)
相关链接:Android WebView 不支持 H5 input type="file" 解决方法

  • 3.2 页面元素显示位置与真实位置有误差

场景:弹框中的输入框聚焦时会弹出手机的软键盘,然后收起键盘会发现,弹框中的按钮或者关闭无法点击。

当时误以为是什么问题使页面"卡"住了,后面经过观察尝试,发现是页面发生滑动导致的。当软键盘弹出时,会把webview的可视区域向上滚动一段距离,而软键盘收起时位置没有还原回来导致页面发生偏移,监听scrollY就会看到变化过程。"卡"住产生的原因就是位置变了,这里比较玄学的就是实际位置变了,按钮却显示在正常的位置,也导致开始没即使定位问题原因。

解决方法:通过监听输入框的聚焦失焦,当发生失焦时(失焦时正好软键盘也收起了)使用window.scrollTo(0,0)将页面回到正常的位置

四、其他总结

因为前端项目都使用Vue框架,这里移动端页面UI库,对比mint-ui,最后选择了Vant

Image placeholder
maoxfjob
未设置
  95人点赞

没有讨论,发表一下自己的看法吧

推荐文章
react-native中IOS的webview和js层通信 - UIWebview

前言在9012的最后一篇写到了在rn中安卓的webview的通信原理,而作为0202年的第一篇,继续讨论上年rn中webview通信剩下的部分。背景:对于webview,了解过的人都知道在ios端会存

Docker容器实现原理及容器隔离性踩坑介绍

本文讲述了 关于容器隔离性的一个“坑”正如Docker官方的口号:“Buildonce,Runanywhere,Configureonce,Runanything”,Docker被贴上了如下标签:轻巧

HBase实战:记一次Safepoint导致长时间STW的踩坑之旅

本文记录了HBase中Safepoint导致长时间STW此问题的解决思路及办法。过程记录现象:小米有一个比较大的公共离线HBase集群,用户很多,每天有大量的MapReduce或Spark离线分析任务

《从PPTV网络视频,到PPIO区块链分布式存储》

摘要:2019年11月26日,同济创业谷与PPIOCodeTalks联合举办了《创新X-区块链与创新创业》区块链技术分享会,本期我们为读者带来主题分享--《从PPTV网络视频,到PPIO区块链分布式存

Pandas数据处理三板斧——map、apply、applymap详解

微信公众号:「Python读财」如有问题或建议,请公众号留言在日常的数据处理中,经常会对一个DataFrame进行逐行、逐列和逐元素的操作,对应这些操作,Pandas中的map、apply和apply

有了这8个Chrome扩展工具,Web开发事半功倍!

Chrome浏览器扩展程序,无论对开发人员还是设计人员来说,都是非常有用的,有些扩展程序会对开发工具的某类功能进行增强,也有一些会复制开发工具中的部分特性。从某种意义上来说,Chrome商店中的每个扩

数据泄露后,美国Web托管服务商Hostinger重置1400万用户密钥

导读:据外媒TheNextWeb报道,美国Web托管服务商Hostinger在日前发生了包含1400万用户信息的数据库被“未经授权的第三方”访问事件。随后,Hostinger决定采取“预防措施”——整

为什么说 Python 是人工智能最佳Web开发的语言?

由于所有用户都可以使用大量的预构建库,因此Python非常适合人工智能在Web开发中的应用–但是还有什么能让它变得如此吸引人?在AbsoluteDigitalMedia,我们将仔细研究Python的历

重磅|庖丁解牛之——Flutter for Web

Flutterfor Web在2018年冬的Flutter1.0伦敦发布会上,Flutter产品经理TimSneath通过一个滑动拼图的例子介绍了如何让Flutter运行在Web之上。这一当时代号Hu

Ambassador 0.52 新特性:会话亲和性、负载均衡控制、gRPC-Web

本文由公众号EAWorld翻译发表,转载需注明出处。作者:RichardLi 译者:白小白 原文:http://t.cn/E6cZoyG现时的云原生应用由多种异构的服务或者微服务组成,服务间、服务与客

Spring Boot 中的响应式编程和 WebFlux 入门

Spring5.0中发布了重量级组件Webflux,拉起了响应式编程的规模使用序幕。WebFlux使用的场景是异步非阻塞的,使用Webflux作为系统解决方案,在大多数场景下可以提高系统吞吐量。Spr

你不知道的 CSS : Next-generation web styling

最近看了ChromeDevSummit2019大会视频,了解到了很多之前不知道的CSS新特性,挺有意思的。下面我就介绍几个激动人心的特性。特性总览:StickyStickeyStackSticySli

Java Web需要用到css吗

JavaWeb需要用到css吗javaweb包括服务器和客户端,服务器不需要css,只是数据的处理。客户端需要用到css,因为网站开发需要使用css技术来美化页面。●CSS层叠样式表(英文全称:Cas

如何在JavaWeb中用css

如何在JavaWeb中用css一、css概念:CascadingStyleSheets层叠样式表层叠:多个样式可以作用在同一个html的元素上,同时生效二.、好处:1.功能强大2.将内容展示和样式控制

Java Web html无法引用css?

JavaWebhtml无法引用css?javaweb中html无法引用css是因为css文件放置的位置不正确,css文件应该放在与WEB-INF同级目录,而不是WEB-INF文件夹内。(相关课程推荐:

webpack中css的url报错?

webpack中css的url报错?css-loader://打包样式中背景图 { test:/\.(png|jpg)$/, loader:"url-loader?limit=8192&name=im

WebAssembly前瞻及用C/C++写HTML和Hanjst汉吉斯特

2019年12月16日,北京下了今冬第二场雪❄️,不大不小。年终岁尾,国际上几大软件及互联网公司(Google、Microsoft、Apple和Mozilla)拉上互联网标准化机构W3C发布了WebA

分享一个可视化开发vue框架下的各类ui的web在线表单设计布局器

新手发帖,第一次不小心刷新了一下就没了本人刚入门vue,偶然间发现这款布局器挺好的,可视化开发element所以分享给大家网站地址:http://lowcode.magicalcoder.c...嵌入

websocket

什么是websocket?websocket是一种网络协议,是在HTTP基础上做了一些优化的协议,与HTTP无直接关系。HTTP协议HTTP(超文本传输协议):规定了web浏览器如何从web服务器获取

基于Webpack的css sprites实现方案

一、前言关于csssprites(雪碧图/精灵图)的几种实现方案可以参考浅谈CSSSprites雪碧图应用。本文主要讨论基于webpack的csssprites实现方案。由于使用webpack时会涉及

Stylus系列——webpack-spritesmith配合stylus使用示例

一、前言基于Webpack的CSSSprites实现方案,若是直接在html中调用雪碧图图标已经很方便,但是实际开发过程可能遇到需要在伪元素中使用雪碧图,或者需要hover切换另一个图标,这种情况下就

利用webhook使php项目自动部署

1.先来讲一下自动部署的原理,一般在我们push代码的时候,可以自动请求webhook中设置的url,完成一次请求与响应。那么只要我们设置的url地址请求的php文件内容是执行命令行gitpush命令

react中的webpack是什么?

Webpack是一个开源的前端打包工具。Webpack提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码。Webpack可以从终端、或是更改webpack.config

一小时快速搭建基于阿里云容器服务-Kubernetes的Web应用

本文面向的读者如果您是一个Kubernetes的初学者,本文可以帮助你快速在云上搭建一个可实际使用的集群环境,并发布自己的第一个应用。你无须提前准备任何的硬件资源或者下载任何的软件包。 如果您已经有一

使用html-webpack-plugin对HTML文件进行预处理

一、前言先整理一波之前和webpack相关的文章: 使用Webpack对CSS文件进行后处理 基于Webpack的CSSSprites实现方案 Stylus系列——webpack-spritesmit