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设计盲区示意图

你可能感兴趣的:(H5设计尺寸总结)