不得不说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页面的影响较大。
延伸阅读之
设计稿尺寸
设备独立像素与物理像素的区别
网友评论