H5在全屏Webview中双端适配刘海屏

2019-12-10 15:45:26

背景: 最近遇到一个看似常规的H5需求,是App内嵌的一个功能模块,看样子跟往常一样重复造轮子就OK了,客户端开个Webview加载页面即可。 正常我们遇到最多的是下面这种类型: 这种的话一般是封装一个Webview包含返回+标题+分享功能,然后加载H5即可,返回即关闭Webview,标题是读取网页的Title属性,分享是调起客户端的分享弹窗。 然是这次的H5有点不寻常的东西: 导航栏除了返回键、title、右侧的操作菜单(进入另一个H5页),在title还有一个操作项❔,用于点击弹出说明框。 有一个穿透状态栏和导航栏的背景 大概长下面这样: 向上面的这种复杂页面一般是客户端做的,但是!!! 因为种种原因,最后商量用H5做。那看到这样的设计图,机智的攻城狮们一般会跟产品争论一番讨论说你这背景图做不了,只能到导航栏以下,并且你这个问号得移到其他地方bulabulabula。。。 然而作为一名专业的攻城狮,我们当然是奔着最佳的视觉感官+用户体验去的,遇到问题要克服之! 那么确定100%还原设计图后,首先想到的一个方法是和双端定义一系列协议,包括设置全屏背景图、在title后面加操作按钮(及隐藏方法,因为到其他页面就没了),在右侧加自定义的菜单,点击后可跳转其他页面。这个看着就很麻烦,涉及到一系列的交互想想就头疼,还不如直接原生写的痛快一点。和客户端你同学讨论后他们果然面露难色,在我说完第二秒就否决的这种做法,原因很简单: 1、