h5頁(yè)面混合嵌入到APP后召噩，我們會(huì)發(fā)現(xiàn)一些難以修復(fù)的Bug，但在h5網(wǎng)頁(yè)端卻不能復(fù)現(xiàn)具滴，因此給我們調(diào)試也帶來(lái)很大的不便凹嘲。為了提高開(kāi)發(fā)工作的效率周蹭，所以就自己 *遇到的一些問(wèn)題和常見(jiàn)的問(wèn)題 *做一下總結(jié)補(bǔ)充疲恢，同時(shí)也將 *調(diào)試的方法 *和大家分享
1. 無(wú)法滾動(dòng)，在混合APP中這個(gè)是最常見(jiàn)最容易發(fā)生的問(wèn)題俱尼。
問(wèn)題描述：html萎攒、body有設(shè)置height：100%耍休，會(huì)導(dǎo)致在APP中不能滾動(dòng)
解決一：去掉html、body的height設(shè)置斯够，同時(shí)把不需要滾動(dòng)的部位設(shè)置固定定位（這樣看起來(lái)就像在當(dāng)前容器中滾動(dòng)而不是在整個(gè)html中滾動(dòng)。）
解決二：使用iscroll 或者 [vue-scroller](https://github.com/wangdahoo/vue-scroller) 等第三方j(luò)s模擬滾動(dòng)的npm 插件抓督。目前自己是使用方案一實(shí)現(xiàn)的束亏。
** 2. 固定定位position: fixed 失效。**
問(wèn)題描述：我們都知道h5頁(yè)面中的固定定位是相對(duì)于整個(gè)window窗口定铜，但中混合頁(yè)面中怕敬，尤其在iOS系統(tǒng)的固定定位抖動(dòng)的情況，或者會(huì)隨頁(yè)面滾動(dòng)东跪，或者沒(méi)有實(shí)現(xiàn)預(yù)期的層次關(guān)系。
解決： 用position: absolute 布局代替固定定位罩锐。
** 3. 用vue做前端頁(yè)面 解決IOS返回白屏問(wèn)題**
問(wèn)題描述：進(jìn)入A頁(yè)面——>B頁(yè)面——>ios自帶的返回——>白屏出現(xiàn)——>手動(dòng)點(diǎn)擊白屏處——>問(wèn)題解決
原因：在ios機(jī)器上使用webview開(kāi)發(fā)Vue項(xiàng)目時(shí)候卤唉，go history(-1)， 無(wú)法將body的高度拉掉竭恬，使得遮住熬的，觸發(fā)輕點(diǎn)擊，方可消除遮罩
解決：html岔绸，body都是100%橡伞，#app撐起了父元素的高度，但是瀏覽器默認(rèn)的滾動(dòng)scroll并不是#app兑徘，而是body,某些元素，造成返回history 后藕漱，無(wú)法復(fù)原（ios 的鍋），為此肋联，我們將#app 進(jìn)行了絕對(duì)定位，并讓它重新成為 scroll 的對(duì)象忘伞，從而解決問(wèn)題
具體實(shí)現(xiàn)：
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. 訪問(wèn)圖片出現(xiàn)403(服務(wù)器端資源不可用)的解決辦法
參考網(wǎng)站：https://blog.csdn.net/tiantang_1986/article/details/83748782
5. 居中對(duì)齊沙兰，ios\Android 不能同時(shí)居中垂直對(duì)齊
小伙伴們可能會(huì)碰到鼎天，測(cè)試給提bug沒(méi)有垂直居中暑竟，用自己手機(jī)一看確是居中的。怎么回事罗岖？？桑包？
解決：給父元素使用flex布局垂直居中纺非，這還不夠，還是會(huì)有不兼容的情況弱左。這時(shí)需要把父炕淮、子元素的相關(guān)的寬高尺寸都X2, 然后在父元素上使用transform:scale(0.5)。整個(gè)父容器縮小一倍即可涂圆。
具體實(shí)現(xiàn)(主要代碼)：
.parent{
display: flex;
align-items:center;
transform:scale(0.5);
}
.children{
width: 200px; // 原本是100px
}
