h5 页面设计尺寸
请注意：（以下所有讨论内容和规范均将viewport设定为content=”width=device-width”的情况下） 也就是我们的H5页面前端代码里面必须包含
<meta content=”initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width” name=”viewport” />
<meta content=”telephone=no” name=”format-detection” />
根据目前市场流行的手机移动终端，统计他们的设备独立像素。
H5的设计稿一般设计为640x1136px即可。 既满足了显示需求，又能降低用户加载图片需要的带宽。
可以用各种分辨率的移动智能手机查看我们设计的H5页面时，当然，也会出现如下的情况，内容显示不全，甚至一些重要内容和按钮都会被遮挡。
第一：背景图片必须采用background-size:cover;来实现。
第二：我们在进行H5页面内容规划布局设计的时候，不能把重要内容放在太偏下的位置或者偏上，否则前端布局时可能出现内容显示不全的情况。
过对比可得：
除去将浏览器全屏显示的情况，几乎所有情况均会有顶部的状态栏和导航栏。
iPhone的设计标准，状态栏和导航栏的独立像素高度分别为40px和88px。
由于Android系统可以更改状态栏和导航栏的高度，这里可以取默认值为48px和100px（这些尺寸网上均可查）。
那么就会把网页内容往下挤，进入盲区（根据不同的布局方式可能挤出视口，即可视区域之下，）。取这两个系统者的最大值为148（48+100）,如下图5，设计稿要尽量保证单页下面没有重要内容。
图5
那么在所有屏幕大小上把重要内容显示完全，就要注意市面上存在的小尺寸手机屏幕，现在绝大部分智能手机分辨率都在640x960px（iPhone4分辨率）之上，所以只要把重要内容放在上图5中的盲区之上即可。计算后的最安全高度为812（960-148=812）。
在此总结，一般情况下，以现有市场上流行的移动智能手机，单页翻转（非延伸向下的长页面）设计稿尺寸为640×1136，在高度为812处设置一条安全线（参考线），将重要的内容布局在这条安全线之上。
来自：http://www.chinaz.com/design/2015/1103/465670.shtml
最新文章
- springboot+dubbo
- iframe 的使用和登陆退出的实现——整个页面跳转
- Leetcode系列-Search in Rotated Sorted Array
- ios app 开发中ipa重新签名步骤介绍-备
- 基于html5 canvas 的强大图表插件【Chart.js】
- ibv_get_device_name()函数
- 2018-2019-2 20175228实验一《Java开发环境的熟悉》实验报告
- Django文件存储(一)默认存储系统
- bash执行命令分别输出正常日志和错误日志
- C++中vector容器的常用操作方法实例总结
- C++进阶--显式类型转换(casting)
- C语言编程流程
- thinkphp3.2 jquery ajax巧妙使用
- mac下安装mysql 1820 重置默认密码
- ramfs和tmpfs的区别
- 720P、1080P、4K是什么意思?
- LDPC知识点
- BZOJ2301：[HAOI2011]Problem b——题解
- bzoj 4414 数量积 结论题
- hdoj1005--Number Sequence