文档章节

再探 butterfly.js - 奇异的留白

w
 webchock
发布于 2015/01/29 17:18
字数 481
阅读 217
收藏 2

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

这样的结果就是导致了在chromeApple iPad 3/4(landscape mode)下,<body>height值为672px,而且是!important的。显然这在Apple iPad 3/4(landscape mode)(分辨率为1024*768)做不到height100%

####真相只有一个

今天在研究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有人提出了一样的issueIOS 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,而不是iPad768px?? 因为在iPad实机使用下,屏幕上有系统的最顶的电量、信号状态栏。在safari中有地址栏和其他后退、菜单的按钮。这些都占了屏幕的高度。最后留给我们的网页的height只有672pxlandscape mode)。

所以,在chromeiPad调试模式下发现672px会在屏幕底部留有一大段空白也不用惊讶!butterfly.js会将你的webApp在真机上展示得好好的!!

© 著作权归作者所有

w
粉丝 4
博文 13
码字总数 5070
作品 0
广州
私信 提问
再探 butterfly.js - 抛砖引玉篇(notification.js)

再探 butterfly.js - 抛砖引玉篇(notification.js) 事情经过 今天又来研究的源码(打酱油),发现了一个。顾名思义就是嘛,那么这个到底有什么用途呢?题外话:还有十几天就过年... 我的新年...

webchock
2015/02/02
761
3
再探 butterfly.js - grunt.js篇(一)

再探 butterfly.js - grunt.js篇(一) 神器 grunt.js 久仰的大名,学习一直是我的第一位。趁着新春佳节来临之际(打酱油的日子),就来填了这个坑,完了这个心愿。的强大,强大在于它拥有很...

webchock
2015/02/13
240
0
留白在网页设计当中的运用

早在小编上大学就喜欢日本简约的设计风格,从田中一光到现在的原研哉,他们一点点的将日本设计带向了全世界。现在大家说的日式风大都是简约风格,这样设计风格最近几年也一直被推崇着。 日本...

尹公子
2017/03/20
184
0
如何在网页中使用留白

所谓留白,有时也称作负空间,两者是同一个概念。尽管这个术语尤其指留“白”,但它所指的区域并不一定要是白色的。它只是网页布局中环绕各元素的空白空间。 这样的空间体现为多种不同形式,...

oschina
2014/07/28
6.3K
16
学会这一招,你的审美水平就能超过 80% 的人!

「这一页 PPT 没有呼吸感,看着让人窒息。」 「我觉得这里……这里,还有这里,可以留白处理。」 …… 做 PPT 的时候,经常听到类似的修改意见。 「留白」的概念多好理解啊,不就是让页面空出...

秋叶PPT
2018/10/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring使用ThreadPoolTaskExecutor自定义线程池及实现异步调用

多线程一直是工作或面试过程中的高频知识点,今天给大家分享一下使用 ThreadPoolTaskExecutor 来自定义线程池和实现异步调用多线程。 一、ThreadPoolTaskExecutor 本文采用 Executors 的工厂...

CREATE_17
今天
5
0
CSS盒子模型

CSS盒子模型 组成: content --> padding --> border --> margin 像现实生活中的快递: 物品 --> 填充物 --> 包装盒 --> 盒子与盒子之间的间距 content :width、height组成的 内容区域 padd......

studywin
今天
7
0
修复Win10下开始菜单、设置等系统软件无法打开的问题

因为各种各样的原因导致系统文件丢失、损坏、被修改,而造成win10的开始菜单、设置等系统软件无法打开的情况,可以尝试如下方法解决 此方法只在部分情况下有效,但值得一试 用Windows键+R打开...

locbytes
昨天
8
0
jquery 添加和删除节点

本文转载于:专业的前端网站➺jquery 添加和删除节点 // 增加一个三和一节点function addPanel() { // var newPanel = $('.my-panel').clone(true) var newPanel = $(".triple-panel-con......

前端老手
昨天
8
0
一、Django基础

一、web框架分类和wsgiref模块使用介绍 web框架的本质 socket服务端 与 浏览器的通信 socket服务端功能划分: 负责与浏览器收发消息(socket通信) --> wsgiref/uWsgi/gunicorn... 根据用户访问...

ZeroBit
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部