用visual viewport除以layout viewport得到的就是页面的缩放比，这个缩放比是手机浏览器通过页面大小和设备宽度自动计算的，通俗的讲，上面这一情况可以理解为：为了在384px的Nexus 4中完全显示1280*768的这个div，那么只有通过缩放，缩放比是2.02，也就是说当我们的div的像素更大时，这个缩放比也会越大，在实际开发中显然这样任由它缩放是不合理的，我们应该控制这个缩放系数，通常指定值为1：
<meta name="viewport" content="width=device-width,initial-scale=1">在html源文件中添加如上修改，再次看一下渲染后的效果：
如上图，我们指定了initial-scale为1，可以看到layout viewport和visual viewport的值都为384了，这也就回归了我们最最原始的预期，在这个384*567的Nexus 4上只能显示1280*768像素的这个div总面积的1/4，所以我们在移动web开中关于viewport最佳的设置方案就是：layout viewport=设备宽度=visual viewport，对应的Meta标签代码就是：
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">最后一点，为了让这个div能在Nexus 4上正常铺满显示，我们应该合理设置它的宽度和高度，即将它设置为384*567px，如下图所示就完美的刚好铺满了屏幕：
至此关于viewport以及移动开发中的单位就全部介绍完毕了。
总结简单记录一下移动开发中用到的各种单位以及移动web开发中viewport的相关概念和应用，希望对遇到类似问题的同学有所帮助，The End。