iPhone屏幕尺寸说明及iPhone在微信上的一些表现

好久没有更新博客了，因为本身的水平通常，能力有限，这种状况下的知识点可能过于薄弱，因此很差分享给你们，注意是怕误导你们了，最近学习移动端的东西，有点心得，分享给你们，但愿对你们有所帮助，若是有什么地方说的不对的地方，万望不吝赐教，批评指正，谢谢了！

好了，开场白就很少说了，下面咱们进入正题吧（有点猴急）：

iPhone设备的实际显示尺寸：

今天要讲的主题是关于iPhone的尺寸问题和在微信上iPhone的尺寸表现，能力有限，就讲这一个知识点（这里说的iPhone指的是iPhone手机，不用我多强调吧），咱们接触到的iPhone手机主要有iPhone4，iPhone4s，iPhone5，iPhone5c，iPhone5s，iPhone6，iPhone6plus（近期要出的iPhone6s,iphon6s plus暂且不论，没出不知道），经过官方网站能够查到对于的屏幕尺寸，这里就要引入一个概念了，就是设备像素比（devicePixelRatio），其实指的是window.devicePixelRatio, 被全部WebKit浏览器以及Opera所支持，那就要问了，何为设备像素比啊，下面给你们详细介绍一下：

先给你们看一下iPhone尺寸上的比较详细的参数说明，若是你记不住，能够把这图保存起来，以做备忘。

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

公式是：window.devicePixelRatio = 物理像素 / dips

（我本身测试的应该是设备的渲染像素和设备独立像素的比例，即 window.devicePixelRatio = 渲染像素 / dips ，这里的渲染像素指的是上图的Rendered Pixels）

你们都知道，ISO用的都是视网膜屏幕，而Android却并不全是，这个之后再说，就像大多数浏览器同样，大部分运行时的devicePixelRatio 的值是1，即屏幕是多少像素就显示多少像素，

而视网膜屏幕就不一样，它会将多个像素当一个像素使用，举个例子，若是设备像素比（dips）为2，就是说用2*2个像素显示一个像素的东西，若是你们很差理解，能够脑补一下，应该你们都有这样的体会，好比一个100*100的图片，不过这张图的像素不是很高，就会感受很模糊，若是是同一张图，可是它的实际大小是200*200，可是图片显示的大小是100*100，这样就会以为这张图会比原来的图显示的更清晰，就是这个道理，也就是说，设备像素比越高，显示的越清晰，这就是为何视网膜屏幕看起来这么清晰的缘由，

固然这也须要更高像素的图片

那总结一下：手机实际显示的尺寸并非手机实际的物理尺寸，也就是说通常手机参数里面的分辨率并非手机真正显示的尺寸，而是跟设备像素比有关系的，若是手机的设备像素比是1，即devicePixelRatio =1，则手机的显示尺寸就是手机的物理像素（如iPhone 3GS，设备像素比为1，物理像素320*480，实际显示的尺寸就是320*480），若是设备像素比是2，即devicePixelRatio =2，则手机的显示尺寸就是手机物理像素/2（如iPhone6的物理尺寸为750*1136，设备像素比为2，则实际显示尺寸为375*667），

这里要注意的是，设备像素比并不必定是整数，也能够是小数，好比Nexus One，分辨率为480*800，实际显示尺寸为320*533，则其的设备像素比为1.5

（我对设备像素比是物理像素与设备独立尺寸的比例仍是渲染像素与设备独立尺寸的比例的疑惑是在测iPhone6 plus的尺寸，上图能够看到，iPhone6 plus的设备像素比是3，物理像素是1080*1920，若是是物理尺寸与设备像素比的话，那实际显示尺寸应该是360*640，可是显然这尺寸是不对的，可是渲染像素1242*2208的尺寸/3 =414*736 正好，因此我认为 设备像素比 是 渲染像素与设备独立尺寸的比例，只是通常的屏幕物理像素就等于渲染像素，若是有哪一个大牛有更好的论点，欢迎批评指正！）

iPhone在微信上的设备尺寸兼容：

那如今就很清楚了，iPhone4/iPhone4s 的屏幕显示尺寸为320*480，iPhone5/iPhone5c/iPhone5s的屏幕显示尺寸为320*568，iPhone6的屏幕尺寸为375*667，iPhone6 plus的屏幕显示尺寸为414*736，用css作iPhone的尺寸兼容就好作了，可是，你觉得这样就完了吗？发个图片解释一下

图有点大，没作压缩，看的清楚，不知道你们注意到没有，若是在作微信web页面开发的时候，若是用上述咱们说的设备高度来作的话，实际显示的高度老是不对，貌似也没有这么高，例如上图为iPhone6的截图，屏幕高度document.body.clientHeight ==603 或者

$(window).height==603，可是用谷歌模拟器的宽高显示是真真的，看下图：

那少的64px去哪里了，哈哈，揭晓答案！

你们看微信上面的状态栏和标题栏，往上看大图（运营商，电池，时间那一栏和下面的腾讯新闻栏），这个高度恰好64px，因此，如今知道那64px去哪里了吧，因此在作微信端全屏显示的图的时候，一点要把这个高度考虑进去，在谷歌的模拟器上特别要注意，否则实际显示效果和你在模拟器上面的效果就不必定同样了。

下面是我用css作的兼容性的写法，仅供参考：

/*ip 4s*/
@media all and (min-width:320px) and (max-height:416px){
	
}
/*ip 5s*/
@media all and (min-width:320px) and (max-height:504px){
	
}
/*andriod*/
@media all and (min-width:360px){
	
}
/*ip 6*/
@media all and (min-width:375px){
	
}
/*ip 6+*/
@media all and (min-width:414px){
	
}

如需特别强调iPhone6和iPhone6 plus，也可把高度也加进去，依状况而定。

同理，安卓也是同样，虽然安卓的设备像素比各不同，设备的宽度，高度都不同，可是iPhone的尺寸是能够把握的，将安卓的尺寸设为全局尺寸，iPhone尺寸单独开小灶，基本上就能够知足绝大部分的移动端设备了。

若是你看了这篇文章，以为仍是有点没弄懂，能够单独私信我或者发我邮箱，若是有什么地方说的不对的，请多多指点，资历尚浅，能力通常，不免会有说错或者理解错的地方，请多包涵！