H5设计尺寸总结

?xml version="1.0" encoding="UTF-8"?

目前已经有2K分辨率的屏幕了，但是不影响设计。（以下所有讨论基于viewport设定为content=“width=device-width”的情况下及代码中必须包含：如图一）

图一

H5一般的设计尺寸采用640*1136px即可，不过实际尺寸采用720x1280/750x1334px尺寸也可以实现，但是有时候会出现内容显示不全的情况，甚至一些重要的内容和按钮都会被遮挡，代码实现：1.背景图片采用background-size:cover;来实现  2.进行H5设计时不要将重要按钮／内容放在太靠下的位置，避免出现显示不全的情况。

通常H5页面除了激昂浏览器全屏显示没有头部外，其他所有情况都有状态栏以及导航栏。

所以，iPhone 的设计标准，状态栏：40px；导航栏：88px；

由于Android系统可以更改系统的状态栏和导航栏高度，可以默认为50px和98px。

所以设计的页面整体就会往下挤，进入盲区，根据不同的布局方式可能会将重要内容挤出进入盲区，，取这两个系统最大值为148px，所以设计图要尽量保证距离底部高度保留148px的非重要区域。

1366pxH5设计盲区示意图