做了5年H5外包，说点大家不爱听的大实话

先泼个冷水：H5和"写个网页"是两码事。

我们团队做H5开发这些年，最常见的场景就是客户拿着一份看似「简单」的需求过来——"就做个活动页面，几页翻翻，加个表单"——结果发现这个页面要同时跑在微信内置浏览器、Safari、Chrome、企业微信、甚至某些安卓厂商的魔改WebView里。然后就开始了漫长的兼容性填坑之旅。

这篇文章不讲虚的，聊聊我们（上海如静知华信息科技有限公司）在H5外包开发中遇到的真问题和我们是怎么处理的。

H5真正的难点在哪

很多人觉得H5简单——不就是HTML+CSS+JS吗？但移动端H5的坑，十个手指头数不完：

• iOS Safari 的「回弹」效果：页面滚动到顶部或底部会触发橡皮筋效果，导致弹窗里的滚动穿透到背景页面。解法不是简单overflow:hidden，而是要在弹窗出现时锁定body的scroll position，用transform来抵消偏移。
• 安卓WebView的碎片化：微信内置的X5内核、各家手机厂商自带的WebView、UC/QQ浏览器——同一个CSS属性在不同内核上的表现截然不同。flexbox布局在华为某型号的WebView上子元素宽度计算异常，grid布局在部分安卓9机型上直接崩。
• 输入框的「弹起」问题：iOS Safari在键盘弹起时会把整个页面往上推，但不会触发resize事件。安卓的键盘弹起会把可视区域高度压缩，fixed定位的元素跟着飞。一个简单的「输入框固定在底部」的需求，背后是两种OS上完全不同的处理逻辑。
• 1px 边框在高清屏上发虚：设计师要求1px分割线，但Retina屏上1个CSS像素等于多个物理像素，边框看起来有2-3px粗。用0.5px吧，安卓大部分机型不支持。最后靠伪元素+transform:scale(0.5)来模拟，还得处理不同DPR的缩放比例。

这些坑，每个都是我们实际踩过、填过的。H5外包开发的核心能力不是「会写HTML」，而是知道哪些写法会在哪些环境里出问题，并在动手之前就避过去。

我们怎么做H5项目

1. 先定兼容性基线

接项目第一步不是画UI，是跟客户对齐兼容性范围。我们会让客户明确回答：这个H5会在哪些场景下打开？微信内/浏览器/App内嵌/线下扫码？如果客户说「能跑就行」，我们会把标准基线拉出来——iOS 13+、Android 8+、微信最新两个大版本、主流浏览器最新版。超出基线的不保证完美渲染，这是写在项目启动文档里的。

2. 技术选型如实告知

简单的活动H5（3-5个页面、少量交互），原生JS+CSS就够了，不引入框架负担。但如果是复杂的管理后台H5、带路由和数据流的应用，我们会选Vue 3 + Vant UI 或 React + Ant Design Mobile。用不用uni-app看需求——如果客户后续明确要做小程序，uni-app是性价比最高的选择，H5编译一份、小程序编译一份，维护一套代码。但如果只做H5，直接用Vue/React更灵活，性能也更好。

3. 性能这件事不能等客户要求才做

很多外包项目的H5加载慢、滑动卡顿，根本原因是没人管性能。我们的标准交付检查项里必含这四条：首屏加载控制在2秒以内（通过资源压缩、路由懒加载、骨架屏）；列表滚动用虚拟列表（超过100条数据坚决不用v-for全量渲染）；图片全部上WebP+懒加载+CDN；避免在scroll事件里做DOM操作（用requestAnimationFrame节流）。

4. 移动端特有的交互不能丢

H5跑在手机上，就该有手机应用的体验。长按保存图片、双击放大、手势滑动切换、下拉刷新、上拉加载——这些原生应用里理所当然的交互，在H5里需要专门实现，而且不同浏览器支持度差异很大。我们积累了一套移动端手势库和交互组件，新项目直接复用，不用每次都从零踩坑。

说说我们交付过的H5项目类型

这几年接的H5外包五花八门，但归纳下来主要是这几类：

• 品牌营销活动页：节日促销、新品发布、裂变拉新。特点是页面少但视觉要求高，动效多，加载速度要求极致（用户扫码进来的，3秒没打开就关了）。我们一般用纯原生JS+Canvas动效+极小体积的CSS动画库，首屏资源控制在500KB以内。
• 移动端商城：商品浏览、购物车、下单支付、订单查询。不只是一个H5页面，而是完整的前端应用。这种我们会用Vue/React全家桶，后台对接客户现有ERP或我们帮搭建的订单系统。
• 企业内部移动办公：审批流、数据看板、设备巡检、仓库扫码出入库。这类H5的特点是权限复杂、数据安全要求高、需要离线能力。我们通常结合Service Worker做离线缓存，加上OAuth2.0做统一认证。
• 嵌入式H5（App/小程序内的WebView）：这种场景有个特殊要求——H5需要跟宿主容器通信。我们会封装好JS Bridge，统一处理Android的window.xxx和iOS的webkit.messageHandlers两种通信方式，让客户的前端代码感受不到差异。

最后说点实在的

H5外包这个市场，价格从几千到几十万都有。差别在哪？差的H5就是一套代码到处复制粘贴，换个客户的Logo就交付了，兼容性随缘，加载速度随缘。好的H5是根据实际业务场景和运行环境做针对性设计，兼容性有基线、性能有指标、交互有标准。

我们（上海如静知华信息科技有限公司）走的是后一条路。不是说我们每条代码都完美——H5本身受浏览器内核限制，总有一些极限场景覆盖不到——但我们在项目启动前就会把能做到的和做不到的讲清楚，交付前有固定的兼容性测试矩阵和性能检测项，交付后有30天的免费维护期来修集成过程中暴露的问题。

如果你有H5外包需求，或者想先聊聊技术可行性，欢迎访问我们的网站 www.zhuatech.cn 了解我们做过的一些案例，或者直接联系我们的技术团队做免费评估。

作者：上海如静知华信息科技有限公司（知华科技）· www.zhuatech.cn