前提：最近有些业务h5页面要嵌套在阿里的 app，但是他们无法提供测试包环境，所以在开发好页面后，在那边测试时发现了一些问题
ios一切正常。以下问题仅仅出现在阿里系安卓app（至少dingding和la za da是出现了）。这就能让人联想到：阿里U4内核的独特性（实测，在uc浏览器是没问题的）
正好沟通工具dingding也是阿里的，能直接打开h5链接复现问题
问题一：样式中的revert 恢复到浏览器默认样式不生效
解决：改为指定样式
例如：
list-style: revert
改为指定的数字：
list-style: decimal
这里复习一下
Initialunsetrevert的区别：
-
revert： 恢复为浏览器默认的属性。例如在浏览器user agent stylesheet里ol默认list-style-type: decimal,ul的是list-style-type: disc,div默认是block -
Initial: 重置为CSS规范中指定的初始值. 如果对ol设置该值,就会变为和ul一致的实心圆圈disc；div设置为该值就会变为inline -
unset: 对于非继承的属性，使用它表现和Initial一样。对于继承属性，会恢复为继承的属性.
问题二：border是1px dashed的时候看不到线条
项目中使用的是postcss-pxtorem
解决：改为3px了
问题三：使用百分比得到的高度区域设置滚动，滚动不生效
例子：fixed定位的区域设置了height:100%, position:fixed，所以截屏整个截屏区域是脱离文档流，相对视口来定位的，高度占满整个屏幕的。里面只有一个搜索框和搜索框下面的结果，结果多的时候可以滚动
企业微信截图_d7fa0bc6-1c1f-41c0-8d23-32dfb3f5da91.png
解决：将100% 改为100vh， 或者fixed定位的区域改为height：100vh，滚动区域计算100%减去搜索框也行
这让我想到了以前做大屏的时候，echart的画布也需要一个固定高度，而整个屏幕又需要兼容各种尺寸，所以当时使用vh既可以满足画布的高度宽度要求，又能满足尺寸的兼容
问题四：在表单使用v-if控制某个输入框不参与提交校验，无法生效
说来奇怪，我这里又不是用的v-show，元素存在才会导致校验不通过。元素都没了，怎么在lazada webview环境还会进入校验了呢
例子：
上代码解决一下
<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)解码成原始数据是没有问题的。可以由前端转了以后再给后端。
解决：后端决定直接替换换行符再解码。
这里有必要展开复习一下二进制：File、Blob、FileReader、ArrayBuffer、Base64
以上就是总结的一些问题
下面记录一点：安全区域
首先设置viewport-fit=cover网页内容完全覆盖可视窗口
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover" />
- 判断在ios并且处在app环境中的时候加一个特定的类名，比如：ipx-head-nav
- 给ipx-head-nav加一个padding-top值空出来顶部安全距离
// constant和env函数去适配iphonex以及IOS 11系统之后的机型
.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));
}
主要是想说安卓的安全区域：由于客户群体大都是安卓，据说env在部分情况下识别为0，当然网友还有更全面的用js判断：塞入一个高度为0隐藏的div，设置env，如果没有高度就再去设置一个固定高度
我这里选择了直接写死安卓顶部距离
网友评论