H5内容安全尺寸

设备独立像素:iPhone5:320 * 568 >> 微信网页可视区高度:504px

         iPhone6:375 * 667 >> 微信网页可视区高度:603px

设备独立像素:window.screen.height

可视区高度:document.documentElement.clientHeight

以iPhone6为基准适配的话,设计稿高度为667,实际667包括iPhone的电量条以及微信或浏览器中的头部或底部区域,所以简单的把设计稿做成667 * 2 = 1334下部分就会溢出被藏起来。

以现在的适配方法并以兼容到微信中iPhone5为例,其根元素的fontSize为32px,到iPhone6根元素是37.5px,其实就会(强行)存在这样一个比例关系以做到同步(不会说在iPhone6 plus是好的到iPhone5出现一屏装不下的情况):

32 / 37.5 = 504 / x x = 509.59

x小于iPhone6可视区高603(当然更会小于iPhone6 plus可视区高,因为由公式知fontSize和可视区高成正比,iPhone6 plus根元素fontSize大于前面两个),此时设计要考虑留白,或整体调整下设计稿的间距。

所以设计稿的有效内容尺寸为 509.59 * 2 = 1181.18 ≈ 1180 为目前我们比较合适的,至于其他安卓机也可以在此基础上再做出调整可能会比较好。

H5页面内容规划布局设计的时候,不要把重要内容例如按钮,放在最偏下的位置...

原文地址:https://www.cnblogs.com/jiujiaoyangkang/p/5674429.html