再探 butterfly.js - 奇异的留白

浏览数：122 / 时间：2015年06月09日

再探 butterfly.js - 奇异的留白

事情经过

在梓凡兄捣鼓他的豆瓣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）。