一、Js兼容性
日期格式
我们经常用的时间格式YYYY-MM-DD HH:mm:ss在Safari浏览器中是不支持的。解决办法就是把YYYY-MM-DD HH:mm:ss格式的代码转为YYYY/MM/DD HH:mm:ss，这是safari浏览器支持的格式。
"2021-11-11 11:11:11".replace(/-/g, '/')
webview中message事件监听
在app的webview页面中，可能会用到message事件监听，这里有个坑：监听对象不一致，ios中使用window.addEventListener方法，而android中使用document.addEventListener方法。
if (isIos) {
window.addEventListener("message", function (msg) {
const params = JSON.parse(msg.data);
if (params.method) {
switch (params.method) {
case "applicationActiveToH5": // 事件名称
break;
default:
break;
}
}
});
} else {
document.addEventListener("message", function (msg) {
const params = JSON.parse(msg.data);
if (params.method) {
switch (params.method) {
case "applicationActiveToH5":
break;
default:
break;
}
}
});
}
点击延迟300ms问题
问题描述：移动端浏览器为了检测用户是否双击会有300ms延迟。
解决方案：
// 方案1: 使用fastclick库
document.addEventListener('DOMContentLoaded', ()=>{
FastClick.attach(document.body)
})
// 方案2: 使用css
html {
touch-action: manipulation;
}
二、CSS兼容性
页面适配问题
问题描述：不同设备屏幕尺寸不一致导致的适配问题。
解决方案：
/* 方案1：使用rem适配 */
html {
font-size: calc(100vw / 375 * 16);
}
/* 方案2：使用vw适配 */
.container {
width: 100vw;
height: 100vh;
}
// px单位转vw单位
const px2vw = (px: number) => (px / 750) * 100
app全屏模式适配
ios底部安全区域
ios底部有一个小黑条，需要进行适配，可以在默认的底部边距基础上加安全区高度。
.content{
padding-bottom: 32px;
/* 兼容 IOS<11.2 */
padding-bottom: calc(32px + constant(safe-area-inset-bottom) / 3);
/* 兼容 IOS>=11.2 */
padding-bottom: calc(32px + env(safe-area-inset-bottom) / 3);
}
flex布局兼容性
flex item间距gap属性在iphone12 mini等手机上不支持，所以改成margin，比如：
.flex-item{
margin-left: 16px;
&:first-of-type{
margin-left: 0;
}
}
移动端font-weight兼容性
禁止ios弹性拉伸
在html和body标签上禁用滚动行为，在当前页面开启滚动。
html,body {
// 禁用ios橡皮筋效果
overscroll-behavior: none;
user-select: none;
overflow: hidden;
}
.pageContainer {
height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
隐藏或自定义滚动条
/* 隐藏滚动条 */
.scroll-container{
&::-webkit-scrollbar {
width: 0;
display: none;
-webkit-overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
-overflow-scrolling: touch;
}
}
/* 自定义滚动条 */
.scroll-container::-webkit-scrollbar {
width: 4px;
}
.scroll-container::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 2px;
}
软键盘遮挡输入框
问题描述：软键盘弹出时可能遮挡输入框。
解决方案：
const input = document.querySelector('input');
input.addEventListener('focus', () => {
setTimeout(() => {
input.scrollIntoView({ behavior: 'smooth', block: 'center' });
}, 300);
});
1px边框问题
问题描述：在高清屏幕下，1px的边框显示得比较粗。
解决方案：
.border-1px {
position: relative;
}
.border-1px::after {
position: absolute;
content: '';
width: 200%;
height: 200%;
border: 1px solid #999;
transform: scale(0.5);
transform-origin: left top;
}
滚动穿透问题
问题描述：弹窗出现时，背景仍可滚动。
解决方案：
// 弹窗出现时
document.body.style.position = 'fixed';
document.body.style.width = '100%';
document.body.style.top = -window.scrollY + 'px';
// 弹窗关闭时
const scrollY = document.body.style.top;
document.body.style.position = '';
document.body.style.width = '';
document.body.style.top = '';
window.scrollTo(0, parseInt(scrollY || '0') * -1)
微信长按图片保存问题
问题描述：微信浏览器中长按图片会出现保存选项。
解决方案：
img {
-webkit-touch-callout: none;
point-events: none;
user-select: none;
}
表单输入优化
问题描述：移动端输入体验不佳。
解决方案：
<!-- 数字键盘 -->
<input type="tel" pattern="[0-9]*">
<!-- 禁用自动完成 -->
<input autocomplete="off">
<!-- 禁用自动大写 -->
<input autocapitalize="off">
字体大小自适应
问题描述：系统字体大小改变影响布局。
解决方案：
/** 禁止字体大小跟随系统设置改变 */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/** 使用媒体查询适配不同屏幕 */
@media screen and (max-width: 320px) {
html { font-size: 14px; }
}
@media screen and (min-width: 375px) {
html { font-size: 16px; }
}
@media screen and (min-width: 414px) {
html { font-size: 18px; }
}
参考：
JavaScript new Date()在Safari上的坑
el-input的number类型里输入e、+、-符号返回值为空？
