##再探 butterfly.js - 奇異的留白javascript
####事情通過css
在 梓凡兄 搗鼓他的 豆瓣FM 播放器的時候,發現了butterfly.js
會在ipad
的橫屏模式(landscape mode)
的時候對<html>
添加class="ipad ios7"
。更加離奇的是在butterfly.css
有如下樣式:html
@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%
java
####真相只有一個ios
今天在研究butterfly.js
源代碼,在butterfly-amd.js
下發現有如下代碼:web
//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。用我渣渣的英語翻譯得出的問題就是:chrome
在iPad(ios7)
的landscape mode
下,將<html>
或<body>
的height
設爲100%
,safari
會把<html>
或<body>
的outerHeight
渲染爲692px
,而innerHeight
渲染會672px
。.net
沒錯,少了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
在真機上展現得好好的!!