在 梓凡兄 捣鼓他的 豆瓣FM 播放器的时候，发现了butterfly.js会在ipad的横屏模式(landscape mode)的时候对<html>添加class="ipad ios7"。更加离奇的是在butterfly.css有以下样式：
@media (orientation:landscape){
html.ipad.ios7 > body{
position:fixed;bottom:0;width:100%;height:672px !important
}
}
这样的结果就是导致了在chrome的Apple iPad 3/4(landscape mode)下，<body>的height值为672px，而且是!important的。显然这在Apple iPad 3/4(landscape mode)（分辨率为1024*768）做不到height为100%
今天在研究butterfly.js源代码，在butterfly-amd.js下发现有以下代码：
//ios7 issue fix
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
$(‘html‘).addClass(‘ipad ios7‘);
}
现在这是butterfly.js刻意为iPad而且是ios7下的landscape mode，做的fix。
在stackoverflow有人提出了一样的issue：IOS 7 - css - html height - 100% = 692px。用我渣渣的英语翻译得出的问题就是：
在iPad(ios7)的landscape mode下，将<html>或<body>的height设为100%，safari会把<html>或<body>的outerHeight渲染为692px，而innerHeight渲染会672px。
没错，少了20px！这样的后果就是网页在屏幕显示出来bottom会被切掉20px。需要以下的hack来修复这奇异的bug：
body {
position: absolute;
bottom: 0;
height: 672px !important;
}
由于这个bug只存在于iPad而且是ios7再而且是landscape mode。所有就有了上文贴出的butterfly.js代码。
为什么是672px，而不是iPad的768px？？
因为在iPad实机使用下，屏幕上有系统的最顶的电量、信号状态栏。在safari中有地址栏和其他后退、菜单的按钮。这些都占了屏幕的高度。最后留给我们的网页的height只有672px（landscape mode）。
所以，在chrome的iPad调试模式下发现672px会在屏幕底部留有一大段空白也不用惊讶！butterfly.js会将你的webApp在真机上展示得好好的！！
原文：http://my.oschina.net/u/2287563/blog/373293