前提：最近有些業(yè)務h5頁面要嵌套在阿里的 app寻馏，但是他們無法提供測試包環(huán)境训枢，所以在開發(fā)好頁面后踩寇，在那邊測試時發(fā)現(xiàn)了一些問題
ios一切正常牍氛。以下問題僅僅出現(xiàn)在阿里系安卓app（至少dingding和la za da是出現(xiàn)了）。這就能讓人聯(lián)想到：阿里U4內核的獨特性（實測增炭，在uc瀏覽器是沒問題的）
正好溝通工具dingding也是阿里的忍燥，能直接打開h5鏈接復現(xiàn)問題
問題一：樣式中的revert 恢復到瀏覽器默認樣式不生效
解決：改為指定樣式
例如：
list-style: revert
改為指定的數(shù)字：
list-style: decimal
這里復習一下
Initialunsetrevert的區(qū)別：
-
revert： 恢復為瀏覽器默認的屬性。例如在瀏覽器user agent stylesheet里ol默認list-style-type: decimal,ul的是list-style-type: disc,div默認是block -
Initial: 重置為CSS規(guī)范中指定的初始值. 如果對ol設置該值,就會變?yōu)楹?code>ul一致的實心圓圈disc隙姿；div設置為該值就會變?yōu)?code>inline -
unset: 對于非繼承的屬性梅垄，使用它表現(xiàn)和Initial一樣。對于繼承屬性输玷，會恢復為繼承的屬性.
問題二：border是1px dashed的時候看不到線條
項目中使用的是postcss-pxtorem
解決：改為3px了
問題三：使用百分比得到的高度區(qū)域設置滾動队丝，滾動不生效
例子：fixed定位的區(qū)域設置了height:100%, position:fixed，所以截屏整個截屏區(qū)域是脫離文檔流欲鹏，相對視口來定位的机久，高度占滿整個屏幕的。里面只有一個搜索框和搜索框下面的結果赔嚎，結果多的時候可以滾動
解決：將100% 改為100vh膘盖， 或者fixed定位的區(qū)域改為height：100vh胧弛，滾動區(qū)域計算100%減去搜索框也行
這讓我想到了以前做大屏的時候，echart的畫布也需要一個固定高度侠畔，而整個屏幕又需要兼容各種尺寸结缚，所以當時使用vh既可以滿足畫布的高度寬度要求，又能滿足尺寸的兼容
問題四：在表單使用v-if控制某個輸入框不參與提交校驗践图，無法生效
說來奇怪掺冠，我這里又不是用的v-show，元素存在才會導致校驗不通過码党。元素都沒了德崭，怎么在lazada webview環(huán)境還會進入校驗了呢
例子：
上代碼解決一下
<template v-if="formData.npwpInfo.hasNpwp">
<van-field maxlength="15" type="digit" class="field" :rules="rules.npwpNumber" v-model.trim="formData.npwpInfo.npwpNumber" autocomplete="off" name="npwpNumber"/>
</template>
<script setup lang="ts">
const rules = ref({
// 這里增加三元，因為只有在lazada app中切換隱藏后揖盘，還是進入了fail
npwpNumber: formData.npwpInfo.hasNpwp ? [{ required: true, message: 'Masukkan nomor NPWP', pattern: PATTERN_NPWP }] : null
})
</script>
問題五：調用安卓客戶端獲取照片的方法眉厨，拿到的base64 后端說有換行符，decode不了
這個問題呢兽狭，本身在前端是沒問題的憾股，我從客戶端拿到圖片的base64去預覽是可以的: 瀏覽器是會忽略換行符的
后端說是拿到這個字符串需要decode，然后上傳到oss
我試了一下箕慧，使用js的 atob(base64)解碼成原始數(shù)據(jù)是沒有問題的服球。可以由前端轉了以后再給后端颠焦。
解決：后端決定直接替換換行符再解碼斩熊。
這里有必要展開復習一下二進制：File、Blob伐庭、FileReader粉渠、ArrayBuffer、Base64
以上就是總結的一些問題
下面記錄一點：安全區(qū)域
首先設置viewport-fit=cover網(wǎng)頁內容完全覆蓋可視窗口
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover" />
- 判斷在ios并且處在app環(huán)境中的時候加一個特定的類名圾另，比如：ipx-head-nav
- 給ipx-head-nav加一個padding-top值空出來頂部安全距離
// constant和env函數(shù)去適配iphonex以及IOS 11系統(tǒng)之后的機型
.ipx-head-nav {
padding-top: 20px; // iphonex系列機型之前頂部安全距離均為20px
我用的40px霸株，因為我還轉為了rem
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
假設有一個需求，一個“返回頂部”的按鈕集乔，需要距離底部30px去件，還需要適配iphonex
.back-top-btn {
bottom: 30px;
bottom: calc(30px + constant(safe-area-inset-bottom));
bottom: calc(30px + env(safe-area-inset-bottom));
}
// scss
// ipx系列底部padding值
@mixin iphonex-padding-bottom($paddingBottom: 0px) {
padding-bottom: $paddingBottom;
padding-bottom: calc(#{$paddingBottom} + constant(safe-area-inset-bottom));
padding-bottom: calc(#{$paddingBottom} + env(safe-area-inset-bottom));
}
主要是想說安卓的安全區(qū)域：由于客戶群體大都是安卓，據(jù)說env在部分情況下識別為0扰路，當然網(wǎng)友還有更全面的用js判斷：塞入一個高度為0隱藏的div尤溜，設置env，如果沒有高度就再去設置一個固定高度
我這里選擇了直接寫死安卓頂部距離
