移动端屏幕高度计算表

今天终于有机会做了一个移动端页面，和机型测试，效果的几个页面都要在手机单屏显示，然后...这么多不同机型的调试就开始了（哭）：
下面是几个主流尺寸（或许吧）的计算，通过屏幕截图的方式计算的，其实我也很奇怪呜呜~~
先来一张截图说明一下什么是系统默认头部（我喜欢怎么说就怎么说吧），屏幕截图质量不甚好，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好，自己就整个屏幕，好期待（虽然不会）。

 

转载于:https://www.cnblogs.com/barrior/p/4464977.html