再探 butterfly.js - 奇異的留白

##再探 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
	}
}

這樣的結果就是致使了在chromeApple iPad 3/4(landscape mode)下,<body>height值爲672px,並且是!important的。顯然這在Apple iPad 3/4(landscape mode)(分辨率爲1024*768)作不到height100%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有人提出了同樣的issueIOS 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,而不是iPad768px?? 由於在iPad實機使用下,屏幕上有系統的最頂的電量、信號狀態欄。在safari中有地址欄和其餘後退、菜單的按鈕。這些都佔了屏幕的高度。最後留給咱們的網頁的height只有672pxlandscape mode)。調試

因此,在chromeiPad調試模式下發現672px會在屏幕底部留有一大段空白也不用驚訝!butterfly.js會將你的webApp在真機上展現得好好的!!

相關文章
相關標籤/搜索