关于chrome模拟iphone系列手机的尺寸问题

不得不说chrome的模拟iphone手机尺寸的功能为开发人员提供了很多便利的条件，尽管经过一些配置，也随时可以在手机上面浏览。但是重要的是chrome还可以审查元素，更好的帮助我们进行调试，查找错误。所以我们可以先用chrome去模拟，最后再在真机上测试。

打开的方法是在页面中右键点击审查元素，就会出现一个开发人员的工具条，工具条上面有一个手机样式的图标，点击，就切换到了模拟手机的模式。

手机模拟

模拟中，iphone的系列是比较全的，Android系列的比较少，但是可以自动去添加机型的尺寸。点击下图中的编辑按钮，按照下面的步骤就可以添加新的尺寸了。之后在选择手机版本那里就可以选择自己所添加的尺寸！

编辑尺寸

添加尺寸

真实iphone系列显示内容区域的尺寸

在做fullpage页面时发现的问题是，在chrome里面模拟的好好的，总是和真实手机有差别，最后经对比发现chrome模拟的尺寸是手机整个屏幕的尺寸（包括上下栏目条），而浏览器展示内容的区域是不包括上下栏目条的，就导致了真机和模拟的差别。知道了问题的所在，就可以解决，只需要自己重新配置几个真实内容展示区域的尺寸就OK了。

上下栏目条

iphone系列真实内容展示区域尺寸（默认都是宽X高，浏览器为safari）

iphone4/4s        320 X 370 （屏幕尺寸： 320X370）
iphone5/5s        320 X 457 （屏幕尺寸： 320X568）
iphone6           375 X  554   （屏幕尺寸： 375X667）
iphone5 plus      414 X 628  （屏幕尺寸： 414X736）

android部分手机的真是内容展示区域尺寸（默认都是宽X高）

三星 9300     默认浏览器  360 X 568 (屏幕尺寸： 360 X 640)
三星 9300     UC浏览器    360 X 518 (屏幕尺寸： 360 X 640)
oppo r7s      UC浏览器    360 X  470 （屏幕尺寸： 1080 X 1920）

android方面的尺寸还没有研究过，因为安卓的测试机有限，待研究，也或许没有这个问题。而这个尺寸的问题对于普通页面来说没有太大的影响，对于fullpage页面的影响较大。

延伸阅读之
设计稿尺寸
设备独立像素与物理像素的区别