由 dawei 多端适配不是“锦上添花”，而是用户留存与转化的底线。当前超过80%的网站流量来自移动端，但仅靠响应式布局无法满足真实场景需求——小程序需离线能力，iOS Web App要支持PWA安装，安卓端常需深度集成通知与支付SDK。
策划阶段必须定义“核心三端”：轻量Web（全设备兼容）、微信小程序（覆盖社交闭环）、PWA（可添加至桌面、支持后台同步）。避免盲目追求“五端六端”，优先保障这三类载体下的核心路径——如商品浏览、加购、支付——加载时间控制在1.5秒内，首屏内容可视率达100%。
技术选型讲求分层解耦：前端用Vue 3或React配合UnoCSS实现原子化样式复用；路由与状态管理须抽离为独立模块，供各端调用；API层统一使用RESTful + JSON Schema规范，所有接口默认支持移动端Header识别与自动适配返回格式（如精简字段、图片尺寸裁剪）。
图片与媒体资源必须自动化处理。上传源图后，构建流程自动生成WebP/AVIF格式、适配不同DPR的尺寸集，并通过<picture>标签按环境精准投送。视频默认静音循环播放，优先加载200KB以内LQIP占位图。
测试不可依赖模拟器。真机覆盖需包括：iPhone SE（旧机型性能瓶颈）、华为鸿蒙（Webview兼容性陷阱）、微信iOS/Android双端（JS引擎差异）、Chrome DevTools的Network Throttling（设定3G慢网+高延迟）。
运维监控聚焦三项关键指标：FCP（最大内容绘制）低于1秒、TTI（可交互时间）低于2.5秒、跨端跳转失败率低于0.3%。所有异常自动上报并关联用户设备型号、网络类型与访问路径，形成可归因的优化闭环。
本图基于AI算法，仅供参考
最重要的一条原则：多端≠多套代码。共用业务逻辑、共享数据模型、统一埋点规范。每次功能迭代，只改一处逻辑，三端同步生效。节省的不仅是开发时间，更是长期维护中90%以上的兼容性风险。