移动端H5开发中碰到的兼容性问题总结

脑洞行者

已于 2024-04-15 10:16:15 修改

阅读量1.1k

点赞数 25

文章标签： css 前端 html javascript vue.js 微信 css3

于 2024-03-30 13:33:17 首次发布

本文链接：https://blog.csdn.net/qq_35221977/article/details/137171126

版权

+ vue2/3常用组件（即开即用）专栏收录该内容

12 篇文章 1 订阅

订阅专栏

这些年工作中碰到的兼容性问题，抽空整理了，分享出来希望对大家有所帮助!

Android 相关

使用 line-height 实现文字垂直居中，发现文字偏上

解决方案：采用 flex 布局，align-items: center 来替代，兼容性更高

.elem {
  display: flex;
  justify-content: center;
  align-items: center;
}

border-radius 画出的圆在移动端有毛边

解决方案：给元素添加 overflow: hidden 属性

.elem {
  overflow: hidden;
}

安卓上去掉语音输入按钮

input::-webkit-input-speech-button {
  display: none;
}

iOS 相关

Vue 单页应用在 iOS 上微信分享失效，图片，标题和描述均未正常显示，安卓上分享正常

iOS 分享 H5 的效果（失效）

安卓分享 H5 的效果（正常）

原因分析：我们一般在 APP.vue 的 mounted 生命周期中初始化微信 SDK，此时页面的地址 hash 是#/，而首页的 hash 是#/home，导致初始化微信 SDK 时传入的分享 url 和用户实际触发分享操作时页面的 url 不一致，致使在 iOS 上分享失败。

解决方案：初始化微信分享 SDK 时传入的地址，和实际触发分享时页面的地址保持一致

iOS safari 被点击元素会出现半透明灰色遮罩

解决方法：给 html 或者 body 加如下 css 代码

body {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-user-modify: read-write-plaintext-only;
}

iOS 禁止保存或拷贝图像

长按图片保存场景下，禁止 IOS 默认识别图像行为

img {
  -webkit-touch-callout: none;
}

iOS 端微信 H5 页面上下滑动时卡顿

解决方法：给滚动元素加上-webkit-overflow-scrolling 属性

-webkit-overflow-scrolling 属性是来控制元素在移动设备上是否有回弹的效果

auto：使用普通滚动，当手指在屏幕上离开时，滚动立即停止
touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

body {
  -webkit-overflow-scrolling：touch;
}

iOS 默认输入框内阴影重置

阻止 iOS 默认的美化页面的策略-webkit-appearance：none;

input {
  border: 0;
  -webkit-appearance：none;
}

对非可点击元素(div，span 等)监听 click 事件，部分 ios 版本不会触发事件

解决方案 1：添加 css 属性 cursor: pointer; 解决方案 2：换成 button 元素

cursor: pointer;

<button></button>

一进页面就调用 focus()方法或者设置 autofocus 属性，输入框没有自动聚焦

无解，在 iOS 系统中自动聚焦不被允许

将日期（yyyy-mm-dd HH:mm:ss）转换成时间戳报错

const date = '2022-09-22 12:00:00';
// 下面写法iOS会报错无法解析
const timeStamp = new Date(date).getTime();
// 兼容写法如下，将横杠转换成斜杠
const timeStamp = new Date(date.replace(/\-/g, '/')).getTime();

webview 相关

手机底部刘海存在背景，和页面背景色不一致

通过指定 body 的背景色来解决。

body {
  background-color: #fff;
  // or 暗色模式
  // background-color: #000;
}

对于带有 hash 的 H5 链接，部分手机厂商的 webview 打开 H5 页面会加载两次

这是部分 webview 对于特殊 url 有独特的解析和加载逻辑，去掉 hash 即可

// 比如下面这个单页应用的链接，完全可以去掉尾部的 hash

https://vivo.diyring.cc/friend/5b818e2a0b8b6113#/

音视频问题

audio 和 video 自动播放问题

由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。

软键盘问题

输入框聚焦，页面底部内容被动往上推

原因分析：这种情况出现在 Android 手机，输入框聚焦弹出输入法时，会触发页面的 resize 事件。页面的可视区域被缩小，导致页面内容被动往上移动。解决方案：将页面最外层设置为绝对定位，宽高均为 100%，将滚动容器的父节点设一个最小高度为页面的初始化高度。

<template>
    <html>
        <head></head>
        <body>
            <div id="app">
                </div class="view">
                    <div class="scroll">
                        <input type="tel" placeholder="请输入手机号码" :maxlength="11"  />
                    </div>
                </div>
            </div>
        </body>
    </html>
</template>

<script lang="ts">

{
    ...

    // 页面高度信息
    @Getter('innerHeight') innerHeight: string;

    // 更新页面高度信息
    @Mutation('UPDATE_INNER_HEIGHT') updateInnerHeight: (height: number) => void;

    mounted() {
        // 进入页面就获取页面高度快照，给页面设置一个最小高度，防止输入框聚焦后顶起页面底部内容
        this.updateInnerHeight(window.innerHeight);
        window.addEventListener('resize', this.adjustInnerHeight);
    }

    // iPhone进入二级页底部会出现导航条影响innerHeight的取值
    adjustInnerHeight() {
        // 差值>200，我们认为是输入框聚焦弹起输入框导致的resize，不更新innerheight
        const isEffective = Math.abs(window.innerHeight - this.innerHeight) < 200;
        isEffective && this.updateInnerHeight(window.innerHeight);
    }

    ...
}

</script>

<style lang="less">
#app {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.view {
  overflow: hidden;
  height: 100%;
}

.scroll {
  overflow-y: scroll;
  height: 100%;
}
</style>

其它问题

body 存在默认背景色

body 标签在大部分浏览器中的默认背景色是白色，但在极少数浏览器中的背景颜色是淡绿色或者其他颜色。

解决方案：通过指定 body 背景色为#fff，来兼容更多设备。

body {
  background-color: #fff;
}

旋转屏幕的时候，字体大小调整的问题

body {
  -webkit-text-size-adjust: 100%;
}

页面回退

安卓回退到上一页，上一页会触发 reload 事件，重新加载页面；

iOS 回退到上一页，会触发 visibilitychange 事件，不会重载页面。

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    backgroundMusic.play();
  } else {
    backgroundMusic.pause();
  }
});

我们可以在 iOS 上监听该事件，处理页面回退逻辑中的系统差异问题。

html2canvas 插件生成截图有黑边

解决方法：降低html2canvas版本至1.0.0-rc.3

// 想要保存的图片节点
const dom = canvasRef.value as HTMLElement;
document.getElementById('share');
html2canvas(dom, {
  allowTaint: true,
  useCORS: true,
  logging: true,
  windowWidth: window.innerWidth,
  windowHeight: window.innerHeight,
  ignoreElements: elem => {
  return elem && elem.className.includes('desc');
  },
}).then((canvas: HTMLCanvasElement) => {
  // canvas 转化为图片
  const img = canvas.toDataURL('image/jpeg');
  const image = new Image();
  image.src = img;
  image.classList.add('img');
  const container = document.getElementById('picture');
  const child = document.querySelector('#picture img');
  child && container?.removeChild(child);
  document.getElementById('picture')?.appendChild(image);
});