移动端屏幕高度计算表
今天终于有机会做了一个移动端页面,和机型测试,效果的几个页面都要在手机单屏显示,然后...这么多不同机型的调试就开始了(哭):
下面是几个主流尺寸(或许吧)的计算,通过屏幕截图的方式计算的,其实我也很奇怪呜呜~~
先来一张截图说明一下什么是系统默认头部(我喜欢怎么说就怎么说吧),屏幕截图质量不甚好,ps测量大概咯,能说明问题即可。
(iPhone 4屏幕截图:)
如果不清楚手机的物理尺寸或分辨率可以百度或者Google,或者用chrome开发者工具,如下:
iPhone 4:
320*480(物理尺寸) 系统默认头部去掉 33/960*480=16.5, 合微信头部去掉 128/960*480=64
Device pixel ratio(设备像素比):2
iPhone 5S:
320*568 系统默认头部去掉 33/1136*568=16.5, 合微信头部去掉 129/1136*568=64.5
Device pixel ratio:2
iPhone 6:
375*667 系统默认头部去掉 35/1136*667=20.5, 合微信头部去掉 110/1136*667=64.5
Device pixel ratio:2
iPhone 6 Plus:
414*736 系统默认头部去掉 25/1136*736=16.1, 合微信头部去掉 99/1136*736=64.1
Device pixel ratio:3
结论:
如果做微信的时候,我们只需要将手机自身的物理像素减去合微信头部占用的高度,就得出了网页实际能显示的高度。因为都是一样的高度,所以所有的尺寸只需要知道物理尺寸就好了,然后一减就OK ,可是我却一个一个截图计算了,哭 T_T(以iPhone 6 plus 为例:736-64=672px就是网页实际能显示的单屏高度),如果是做网页端,就是用手机浏览器来观看,额~好恶心的嗦,每个手机浏览器(Q浏,百浏,U浏...)的头部高度,底部高度,好像都不一致,XXX,做个毛线,还是做hybrid APP好,自己就整个屏幕,好期待(虽然不会)。