从0.5px边框、小字体限制到刘海屏定位错位，提供transform缩放、JS动态计算、自定义字体等实战解决方案，彻底解决安卓/iOS兼容性问题，让页面精准适配所有机型！

前言 事情的起因是这样的，由于 小 A 需要负责开发一个 H5 移动端的项目，需要分别在 微信环境 和 企微环境 中去使用，于是 小 A 使用 Vite + Vue3 来进行开发，然后测试提出如下问题

作为一名前端开发者，我们一定都遇到过这样的需求：实现一个占满整个屏幕的欢迎页、弹窗蒙层或者一个 fixed 定位的底部菜单。 直觉告诉我们，这很简单，给它一个 `height: 100vh` 就行了

1. 如何实现H5手机端适配？ 核心三板斧：viewport + 布局方案 + 屏幕密度处理 这行代码让浏览器按设备宽度渲染，避免自动缩放。 然后选择布局方案： 方案一：rem 适配（推荐） rem

原生CSS中的用法 calc() - 动态计算 min()/max() - 极值选择 clamp() - 区间限制 主流适配方案对比 方案 原理 优点 缺点 适用场景 REM布局 根元素动态font-

不知不觉在网易已有三年半，占了一半时间都在与移动端打交道，整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在，不是说它多难而是说它坑位实在太多了，怎样填都填不完。Android和iOS各显神通，Android的系统版本和屏幕分辨率多得难以一招兼容，iOS的顽固标准…

作为一个开发了多个 H5 项目的前端工程师，在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下，并在后面给出坑产生的原理，和现阶段常规的填坑方案。

1. 背景 一般业务也很少接触摄像头，有也是现成的工具库扫个二维码。难得用一次，记录下踩坑。 2.调用摄像头的方法 2.1. input 这个就不用多说了，缺点就是没办法自定义界面，它是调用的系统原生

在实际开发中，移动端H5页面的兼容适配一直是一个重要的环节。针对不同的设备、不同的浏览器内核版本，我们需要采取相应的处理方案，以保证页面的UI展现、用户体验以及功能效果的准确呈现。通过合理的适配方案，