?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的非重要区域。