再探 butterfly.js - 奇異的留白

時間 2019-11-24

標籤 butterfly.js butterfly 奇異留白欄目 JavaScript 简体版

原文原文鏈接

##再探 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在真機上展現得好好的！！

1. 再探 butterfly.js - grunt.js篇（一）
2. 再探 butterfly.js - 拋磚引玉篇（notification.js）
3. 留白的力量
4. 留白篇
5. 虛實留白
6. ios7 留白
7. 再說TCP神奇的40ms
8. 再探Lua的require
9. MobileNet V2 - 再探
10. 再探Nginx【一】
更多相關文章...
• PHP 7 異常 - PHP 7 新特性
• 探索Redis事務回滾 - Redis教程
• 再有人問你分佈式事務，把這篇扔給他
• 互聯網組織的未來：剖析GitHub員工的任性之源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。