標籤：
再探 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 fixif (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在真機上展示得好好的！！
再探 butterfly.js - 奇異的留白
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
