做移动端适配坑是真的多
最近遇到一个react 项目webview页面在ios端的bug
描述一下问题: 就是从原生页面进入webview页面的h5页面
在h5页面存在页面跳转的时候,也就是二级的H5页面,然后返回第一个H5页面,就会出现顶部空白,但是手指触摸一下屏幕就恢复正常了
原因分析: 1.一级h5页面中有较大的图片,可能是因为图片太大未加载
2.原生ios端webview会记住上级h5页面浏览的位置,返回的时候由于react生命周期原因数据未能及时更新
3. h5页面布局的问题,原生页面就只能展示移动端设备的一整屏,但是h5一个页面可以很长,滚动影响造成
解决方案:1.每次进入一个新的页面都刷新(不符合react 的设计模式)
2. 将react 组件的最外层标签设置高度为100vh, 更符合原生移动端设计风格(更好的解决方案)