混合App开发h5页面的一些问题

h5页面混合嵌入到APP后，我们会发现一些难以修复的Bug，但在h5网页端却不能复现，因此给我们调试也带来很大的不便。为了提高开发工作的效率，所以就自己 *遇到的一些问题和常见的问题 *做一下总结补充，同时也将 *调试的方法 *和大家分享

1. 无法滚动，在混合APP中这个是最常见最容易发生的问题。

    问题描述：html、body有设置height：100%，会导致在APP中不能滚动

    解决一：去掉html、body的height设置，同时把不需要滚动的部位设置固定定位（这样看起来就像在当前容器中滚动而不是在整个html中滚动。）

    解决二：使用iscroll 或者 [vue-scroller](https://github.com/wangdahoo/vue-scroller) 等第三方js模拟滚动的npm 插件。目前自己是使用方案一实现的。

  **  2.  固定定位position: fixed 失效。**

问题描述：我们都知道h5页面中的固定定位是相对于整个window窗口，但中混合页面中，尤其在iOS系统的固定定位抖动的情况，或者会随页面滚动，或者没有实现预期的层次关系。

解决： 用position: absolute 布局代替固定定位。

**    3.  用vue做前端页面 解决IOS返回白屏问题**

问题描述：进入A页面——>B页面——>ios自带的返回——>白屏出现——>手动点击白屏处——>问题解决

原因：在ios机器上使用webview开发Vue项目时候，go history(-1)， 无法将body的高度拉掉，使得遮住，触发轻点击，方可消除遮罩

解决：html，body都是100%，#app撑起了父元素的高度，但是浏览器默认的滚动scroll并不是#app，而是body,某些元素，造成返回history 后，无法复原（ios 的锅），为此，我们将#app 进行了绝对定位，并让它重新成为 scroll 的对象，从而解决问题

具体实现：

html, body {

 width: 100%;

 height: 100%;

 margin: 0;

 padding: 0;

 position: relative;

}

#app {

 width: 100%;

 height: 100%;

 background: #fff;

 overflow: scroll;

 -webkit-overflow-scrolling: touch;

 position: absolute;

 left:0;

 top:0;

}

4. 访问图片出现403(服务器端资源不可用)的解决办法

参考网站：https://blog.csdn.net/tiantang_1986/article/details/83748782

5. 居中对齐，ios\Android 不能同时居中垂直对齐

小伙伴们可能会碰到，测试给提bug没有垂直居中，用自己手机一看确是居中的。怎么回事？？？

解决：给父元素使用flex布局垂直居中，这还不够，还是会有不兼容的情况。这时需要把父、子元素的相关的宽高尺寸都X2, 然后在父元素上使用transform:scale(0.5)。整个父容器缩小一倍即可。

具体实现(主要代码)：

.parent{

    display: flex;

    align-items:center;

    transform:scale(0.5);

}

.children{

    width: 200px; // 原本是100px

}