H5内容安全尺寸
2024-08-24 00:33:05
设备独立像素：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页面内容规划布局设计的时候，不要把重要内容例如按钮，放在最偏下的位置...
最新文章
- Toast通知
- [CareerCup] 17.7 English Phrase Describe Integer 英文单词表示数字
- BZOJ2456 mode
- 对EV-Globe5.0资源体系的简单理解
- @media用法。
- 快排算法（C++版）
- mysql登陆报错（ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2)）
- 最小包围多边形（凸包；最小包围点集）——C代码例子
- Android开发，Eclipse创建aidl接口时，出错
- javascript编程代码笔记
- Python之signal模块
- HDU_5563Clarke and five-pointed star
- Python 计算当真因子个数为偶数个时为幸运数，计算区间内幸运数之和
- Spring事务@Transactional标签深入学习
- 根据IP查地理位置信息
- mysql 原理 ~ 常规锁
- ActiveSupport::Concern 和 gem 'name_of_person'（300✨） 的内部运行机制分析
- node.js执行shell命令
- 745. Prefix and Suffix Search 查找最大index的单词
- 【[SDOI2017]序列计数】