H5设计稿固定采用375px移动端标准尺寸

H5移动端兼容设计核心目标、全机型显示统一、无错乱、无挤压、无溢出、字体舒适、交互通用、加载流畅，适配安卓、iOS全尺寸手机，解决大部分H5页面适配翻车、机型差异化体验割裂问题，是移动端H5页面标准化落地必备规范。

一、布局适配核心规范杜绝错乱挤压，统一设计基准尺寸，H5设计稿固定采用375px移动端标准尺寸，所有元素间距组件基于该尺寸规范布局，适配所有大屏、小屏手机等比例缩放避免尺寸混乱，采用弹性自适应布局禁止固定死宽高布局，页面整体使用流式、弹性布局，内容随屏幕宽度自动适配，杜绝左右留白内容挤压、页面横向滚动等问题，安全区域适配全面适配刘海屏、挖孔屏、灵动岛、底部小黑条机型，顶部导航、底部按钮避开手机安全区，关键内容不被系统UI遮挡，保证全机型完整展示，内容边距统一预留，页面左右固定预留安全内边距，文字、卡片、按钮不贴边显示，避免小屏手机内容紧贴屏幕边缘阅读局促。

二、文字字体兼容规范全机型统一显示，字体系统兼容优先使用手机系统默认无衬线字体，适配安卓、iOS原生字体渲染，不使用小众特殊字体，避免字体加载失败、显示错乱、替换变形。如需特殊艺术字体统一转为图片格式，字号最小阈值限制正文最小字号不小于14px，辅助文字不小于12px禁止过小文字，杜绝部分机型文字模糊、看不清自动加粗现象，行高字重统一固定文字行间距、字间距、字体粗细，避免安卓与iOS渲染差异导致的文字高低不齐、排版偏移、文字禁止溢出截断长文本、标题提前做适配处理，自动换行、省略收尾，杜绝文字超出屏幕重叠挤压错乱。

三、图片视觉兼容规范高清无变形图片双倍高清适配，所有展示图片采用2倍图3倍图输出，适配手机高清视网膜屏，杜绝图片模糊、发虚、锯齿问题、图片比例固定Banner、卡片、图标统一固定比例，采用等比缩放模式，禁止拉伸变形、局部裁切错位，保证全机型视觉一致，图标轻量化适配功能性图标统一矢量格式，大小规范统一小屏不拥挤、大屏不空旷线条粗细一致，无残缺无糊边背景图全屏适配，通栏背景图采用全覆盖适配模式，居中展示核心画面，边缘留白裁切保证关键视觉内容不丢失。

四、按钮与交互兼容规范全机型可点击，按钮点击区域合规所有可点击按钮、链接、图标触控区域尺寸不小于44px，适配手机触控操作，避免按钮过小、点击失灵、误触失灵、按钮样式自适应按钮圆角、配色、内边距自适应屏幕，小屏不拥挤、大屏不空旷样式无变形、无截断、交互反馈统一点击、悬浮、切换、滑动效果全机型一致，无卡顿、无失效、无延迟，安卓、iOS交互体验同步，底部悬浮按钮适配固定底部咨询、回顶、功能按钮，避开底部手势栏安全区，不被遮挡不影响操作。

五、动画动效兼容规范无卡顿无失效，动效轻量化处理H5动画以淡入、平移、渐变、透明度变化为主，禁止复杂3D、粒子、流光特效，避免低端机型卡顿、掉帧、加载失败、动效参数统一动画时长、速度、节奏固定，全机型播放效果一致无快慢差异，兼容静态兜底、针对老旧机型做静态兜底方案，动效加载失败时页面样式、布局内容完全正常展示，不影响整体使用。

六、加载与性能兼容规范资源压缩优化、图片、素材、代码轻量化压缩，杜绝加载缓慢、白屏、卡顿问题，适配网速一般的移动端，渐进式加载页面结构优先加载，图片、动效延迟加载，保证页面快速呈现，提升移动端浏览体验，杜绝兼容报错不使用高版本专属前端特性，保证新旧机型各类浏览器、微信内置浏览器均可正常打开展示。

七、兼容测试标准交付必检，交付前必须完成多维度适配测试，确保零兼容问题，小屏、中屏、大屏手机全尺寸适配测试、安卓、iOS双系统样式、交互一致性测试微信内置浏览器、手机自带浏览器、主流第三方浏览器打开测试，横竖屏切换适配测试，杜绝布局错乱网络正常、弱网环境加载测试。

八、兼容设计核心H5移动端兼容设计核心，尺寸标准化、布局自适应、文字全兼容、图片无变形、交互全可触、动效轻量化、全机型无bug，彻底解决移动端常见的错乱、遮挡、模糊、卡顿、交互失效问题，实现全网统一稳定、流畅的移动端展示效果。