• 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页面内容规划布局设计的时候,不要把重要内容例如按钮,放在最偏下的位置...

  • 相关阅读:
    systemd 介绍
    Goland读取配置文件--viper包
    Goland日志记录
    进程查询端口占用
    Python zip() 函数
    Jenkins权限管理(角色权限)
    Django ORM查询总结
    如何查看windows计算机重启记录
    Django ORM迁移
    Django中文乱码解决
  • 原文地址:https://www.cnblogs.com/jiujiaoyangkang/p/5674429.html
Copyright © 2020-2023  润新知