H5尺寸全解析，从设计稿到适配的实用指南
H5页面设计通常以750px为基准宽度，高度随内容自适应，并非固定长宽高，适配时常见做法是将750设计稿通过rem、vw/vh或百分比单位换算，实现不同手机屏幕下的等比缩放，开发中还需考虑刘海屏安全区域、横竖屏切换及实际视口高度变化，避免内容被遮挡或留白过大，掌握设计稿尺寸与弹性适配方案，能有效保证H5在多机型上的视觉一致性与可用性。
在移动端营销与活动页面中,H5几乎是绕不开的载体，很多设计师和运营在搭建H5时，首先遇到的不是创意问题，而是一个很具体的问题：H5尺寸到底该做多大？ 设计稿宽度用750还是640？高度要不要固定？全面屏怎么适配？这篇文章帮你把H5尺寸这件事一次性说清楚。
先理解H5尺寸的基本概念
H5页面本质上运行在手机浏览器或应用内嵌浏览器中,它的尺寸取决于屏幕大小，但设计师不可能为每一台手机单独出图，所以需要一套统一的设计尺寸，再通过适配方案覆盖不同设备。
这里先区分几个概念：
- 设计稿尺寸：设计师在PS、Figma、Sketch中画布的尺寸。
- 逻辑像素（CSS像素）：前端开发使用的单位，通常以375px宽为基准。
- 物理像素：手机屏幕实际的发光点数量，比如iPhone 14的物理宽度为1170px。
- 倍率：物理像素与逻辑像素的比值，常见的有2倍、3倍。
iPhone 14的逻辑宽度是390px，物理宽度是1170px，倍率就是3，如果我们使用750px宽的设计稿，其实是把375px逻辑宽度放大了2倍，方便标注和切图。
常见的H5设计尺寸标准
目前行业里主流的H5设计尺寸已经比较统一,但仍有一些老项目或特殊场景会使用不同尺寸。
750×1334：经典通用尺寸
750宽度是使用最广泛的H5设计稿宽度,它对应iPhone 6/7/8的逻辑宽度375px的2倍，高度1334则对应这些机型的整屏高度。
优点：
- 兼容性好,开发标注方便；
- 2倍图清晰度足够,文件体积可控；
- 绝大多数团队和设计师都习惯这个尺寸。
适用场景：
- 品牌活动H5、邀请函、产品宣传页；
- 常规竖屏营销页面；
- 需要适配大量安卓机型的项目。
750×1624：全面屏适配尺寸
随着全面屏手机普及,1334的高度在iPhone X及以上的机型上会显得不够，底部和顶部容易留白或需要额外拉伸，750×1624对应iPhone X、11 Pro、12/13/14等机型的2倍逻辑分辨率。
优点：
- 更贴合全面屏的视觉比例；可以更舒展，不会显得拥挤；
- 减少刘海屏和底部横条区域的干扰。
适用场景：
- 需要全屏沉浸式展示的H5；
- 视频、动画较多的品牌活动页；
- 目标用户以全面屏手机为主的项目。
640×1136：早期小屏尺寸
640宽度是iPhone 4/5时代的2倍尺寸，高度1136对应iPhone 5的屏幕，现在新项目基本不再单独使用，但在一些老旧系统、微信内置浏览器或低端安卓机上仍有参考价值。
建议： 如果你的H5需要覆盖极低端设备，可以做640宽度的稿子，但主流项目直接用750即可，前端通过缩放适配小屏。
不同场景下的H5尺寸建议
竖屏营销H5
这是最常见的H5形式,建议采用750宽度，高度按内容长度自由延伸，不做固定，首屏高度建议控制在1200—1500px之间，确保在大多数手机上首屏内容完整可见。
如果设计稿高度超过一屏,开发会通过滚动或翻页来实现，内容高度不需要死板地固定在1334或1624。
整屏翻页H5
翻页型H5每一屏都需要撑满屏幕,对尺寸要求更高，建议：
- 设计稿：750×1334或750×1624；放在安全区域内；
- 顶部和底部预留适配空间,避免重要元素被刘海、圆角或底部横条遮挡。
安全区域可以理解为：全面屏手机上方约88px（设计稿2倍下）、下方约68px的区域需要避开核心按钮和文字。
横屏H5
横屏H5的尺寸通常翻转,设计稿常用1334×750或1624×750，横屏H5在手机上的适配更复杂，因为横屏时顶部和底部也会存在安全区问题，同时不同手机比例差异更大。
建议横屏H5尽量把关键操作按钮放在中间区域,边缘只放装饰性元素。
分享卡片与封面
H5被分享到微信、朋友圈时，通常会抓取封面图，分享封面图尺寸建议为500×400px或1:1比例的300×300px，具体以微信官方要求为准，很多团队会单独切一张分享图，而不是直接用H5首屏截图。
H5尺寸适配的几个关键点
宽度固定，高度自适应
H5适配的主流做法是：宽度固定，高度根据内容自动延伸，开发通过设置viewport和rem/vw等单位，让页面在不同宽度下等比缩放。
设计师只需要保证设计稿宽度统一（750），高度不需要严格限定，首屏高度可以标注建议值，但不要强制固定所有手机都显示一样的高度。
左右留边，避免元素贴边
在设计750宽度的H5时,左右两侧建议留出至少24—40px的安全边距，因为不同手机的屏幕边缘可能有曲面、圆角或手势区域，元素贴边容易被裁切或误触。
顶部与底部安全区
全面屏手机的刘海、挖孔和底部横条区域是H5设计必须考虑的问题，建议：
- 顶部状态栏区域：避开88px（设计稿2倍）；
- 底部手势条区域：避开68px（设计稿2倍）；
- 按钮、文字、操作热区不要放在这些区域。
如果H5是在微信内打开,微信浏览器顶部还会有导航栏，实际可视高度会进一步减少，设计时需要提前与开发确认。
字体大小与点击热区
H5中的字体大小不建议直接用设计稿px值换算,通常设计稿750宽度下，正文建议26—32px建议36—48px，按钮文字建议28—36px，点击热区高度至少88px，方便手指点击。
常见H5尺寸错误
高度定死，导致小屏手机内容被裁切
有些设计师习惯把H5高度做成1334或1624并强制无滚动,结果在iPhone SE或小屏安卓机上，底部内容被裁掉，正确做法是核心内容放在安全区，高度允许滚动或缩放。
忽略全面屏安全区
如果设计稿始终按传统16:9屏幕来布局，放到全面屏手机上会出现顶部标题被刘海遮挡、底部按钮被横条挡住的问题，建议从设计初期就按全面屏安全区来排版。
使用过大或过小的画布宽度
宽度低于640会导致切图不清晰,宽度高于750则会增加文件体积和开发复杂度，750是当前最稳妥的选择。
直接拿设计稿截图当分享封面
H5全屏截图在朋友圈里会被裁成正方形,导致核心信息丢失，分享封面应该单独设计，尺寸符合平台要求。
H5尺寸看似是一个技术细节,但它直接影响设计还原度、用户体验和开发效率，总结下来，最推荐的方案是：设计稿宽度统一用750，高度按内容自适应，首屏参考1334或1624，核心内容避开顶部和底部安全区，左右预留安全边距。
把H5尺寸规范做在前面,后面无论是设计、开发还是多轮修改，都会顺畅很多。
