H5页面首屏高定位（浏览器版）

一. 什么是首屏高？

首屏高是指不滑动屏幕的情况下，屏幕顶端（含微信，浏览器头）到屏底的可视范围，

如果是微信平台，则没有底部操作导航，如果是浏览器，由于页面内容会被底部导航遮挡，首屏需要减去底部导航所占高度，如图；

因为微信平台首屏高总是高于这个范围，所以这里主要针对浏览器的首屏高进行定位，结果同样也适用于微信平台。

二.为什么要定位首屏高？

之前每次在做H5页面时，作为渣渣的我不禁疑惑，首屏内的重要信息放置在哪个高度范围才合理? 例如首屏按钮的摆放，放高了大屏手机显示头重脚轻（特别是活动类页），放低了小屏手机看不到，设计稿经常碰到需求的怀（qiang）疑(po)有木有？ 设计稿只做640 x 960PX一种尺寸的有木有？只做一种尺寸从不在其他机型上看效果的有木有？除了自己手机，对于其他大中小屏手机显示效果没谱的有木有？如图 ;

如果你对这些渣渣问题有兴趣，请耐心往下看。

三. 首屏高的分析

首先我们来看看限制首屏高的几个条件；

1. 屏幕尺寸：仅仅是指屏幕像素尺寸，如有2款手机物理尺寸分别为3.5和4.2英寸，但是分辨率都为480x800， 那么即使是2款不同品牌的手机，它们的屏幕尺寸都只是1个，即480x800;

2. PS设计稿：在电脑里使用PS设计的效果图，为了方便重构计算，效果图宽度一般设定为640；

3. 自适应缩放：简而言之，是重构根据屏幕宽度，由程序自动对页面进行缩放，适配各种机型，具体参数各家都不太一样，但差异不大；

以上3个条件，既组成了定位首屏高的测试条件；

首先，我们在自适应缩放技术的基础上，将相同的PS设计稿放在不同手机上看效果，得出测试结果，如图；

测试机型不算太多，但是基本涵盖市面主流屏幕尺寸，他们分别是480x800,480x854,640x960,640x1136,720x1280,750x1334,1080x1920,1242x2208

从测试结果可以看出，即使是重构采用了自适应缩放技术，但首屏显示效果差异仍然很大。

再把这个结果反馈到效果图上，如图；

细心的朋友会发现高1920的机型三星NOTE3，小米4的首屏内容显示比肾6还少，接近小米2S，红米，

这是为什么呢？ 这里给个小提示，大屏手机测试中发现，当屏幕宽超过960时， 页面将不再适配放大，测试结果显示适配最大值为960px；想知道答案的可以回帖讨论，这里不做展开，啊哈哈。

再加入行业数据与自身数据标注：如图

行业数据：http://www.zhihu.com/question/28841081

自身数据统计：500.com

由于技术上的限制，这里统计不到100%，但是可以看到趋势。

四. 如何定位首屏高?

按上面的结论，1刀切的做法是直接在PS里面用640x960的画布通吃，但是对于有追求的设计渣渣，关于选取哪个数值作为标准的首屏，还是要根据具体情况而定，如果是非常重要的购买行为，例如充值，购买等，那么854可以作为你的首要选择。如果是展示，资讯，强调气氛的活动，那么可能需要更大的头图作为展示空间。956也许更适合。如果只在微信传播，则可以在尺码表中减去浏览器底部导航（96）.... “尺码表？ 神码东西？“

(PS:哎呀，这个这个漏掉了，可能写的太快了吧,啊哈哈)

五. 渣渣小神器 - 无线尺码表

 将这个图层放到设计稿上，告诉产品经理，这里放按钮，94.8%的用户能看到...56%的大屏是这个效果...

由于制作过于简单，就不放下载了，按上面的方法，根据用户群的不同，相信大家也能做出适合自己团队的尺码表。         

OVER,第1次写文章，如有遗漏指出欢迎指出，也欢迎讨论，有时间一定回复。谢谢观看，哈哈哈！