HTML5全屏API在FireFox/Chrome中的显示差异

标签: web综合 API chrome Firefox HTML5 | 发表时间:2012-10-08 13:30 | 作者:张 鑫旭
出处:http://www.zhangxinxu.com/wordpress

by zhangxinxu from http://www.zhangxinxu.com
本文地址: http://www.zhangxinxu.com/wordpress/?p=2679

一、人人网上……

今天,在人人网上看同学晒得照片的时候,发现了这个按钮:
人人网上新出现的图片处理图标 张鑫旭-鑫空间-鑫生活

这个按钮是?我移了好几遍,没有 title提示。图形也不具有代表性,一个圈圈意思是?——圈人??是不是啊??不敢点,点了不知道会发生什么,浏览器会不会关掉!!我思想斗争做了很久,终于弱弱地点了一下~~

草骆驼,居然是——全屏显示的提示:
全屏显示的提示 张鑫旭-鑫空间-鑫生活

人人兄,使用新技术固然值得提倡,这个圈圈也不加个提示——让人知道点了之后是全屏啊!!否则,俺们脆弱的小心脏根本承受不起啊——屏幕立马黑了个通透——还以为盖茨发现我的系统是盗版的黑了我的屏呢!!!

好吧,玩完两把三国杀,情绪稳定了,回到正题。人人网这个全屏效果就是使用的HTML5的全屏API,使用其实很easy的!对于全屏API,年初的时候就有耳闻,但未做测试与了解,现在,人人君已经用在实际项目中了,显然,有必要了解一番,可以在自己的项目中耍耍酷,过过HTML5的瘾。

二、相关文章以及一些技术点

搜了下,介绍的文章还不少,您可以参考:

  • 武方博原创的 html5实现全屏的api方法一文。文章前面属于备忘性质的内容,没看头;不过,最后的心得很不错,实际应用经验,值得一看。
  • heero翻译的“ [译]原生全屏Javascript API”。去年时候内容,稍微old的点,多理论,有值得注意的知识点,能了解API的大概。
  • sitePoint上的” How to Use the HTML5 Full-Screen API“, 较新的文章吗,跟实际应用走的也很近,有demo,更值得参考。

如果您正好处于节后综合症发病期,懒得点击上面链接,也可以看下面我精简出来的一些实用的东西:

  1. 全屏效果JavaScript实现
  2. 全屏效果 click, mousedwon, mouseup事件才能触发
  3. 全屏方法为: 全屏元素.requestFullScreen(); 目前不同的浏览器需要不同的前缀,如 mozRequestFullScreenwebkitRequestFullScreen
  4. 取消全屏为: 全屏元素.cancelFullScreen(); 同样,不同浏览器需要添加私有前缀,如 mozCancelFullScreenwebkitCancelFullScreen.
  5. 可以通过 document.fullScreen判断浏览器是否处于全屏状态。注意:FireFox和Chrome写法上有不同,Webkit内核浏览器需要增加个 is, 如 document.webkitIsFullScreen; 而Firefox则是 document.mozFullScreen.
  6. :full-screen{}用在CSS代码中,可以控制全屏元素(及其子元素)全屏状态时的样式。同样,不同浏览器不同前缀。如 :-moz-full-screen{}:- webkit-full-screen{}.
  7. 一个页面如果有多个全屏元素,在CSS控制的时候,可以使用类似 #element:full-screen{}的选择器分别控制。

如果以上密密麻麻的文字看得你头大眼花,换个轻松的浏览,您可以狠狠地点击这里: HTML5 full-screen全屏API测试demo

点击demo页面中,万年不变的张含韵照片,即可触发全屏浏览提示,类似下面:
全屏浏览器张含韵的照片截图 张鑫旭-鑫空间-鑫生活

该demo几乎均遵循了上面概要的一些技术tips, 完整代码demo页面上均有,不难懂的,大家有兴趣可以看看。

如果您想在实际项目中使用HTML5全屏API,demo页面中出现的这个方法必不可少(可以兼容以后N多年的HTML5发展):

var runPrefixMethod = function(element, method) {
    var usablePrefixMethod;
    ["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
        if (usablePrefixMethod) return;
        if (prefix === "") {
            // 无前缀,方法首字母小写
            method = method.slice(0,1).toLowerCase() + method.slice(1);

        }

        var typePrefixMethod = typeof element[prefix + method];

        if (typePrefixMethod + "" !== "undefined") {
            if (typePrefixMethod === "function") {
                usablePrefixMethod = element[prefix + method]();
            } else {
                usablePrefixMethod = element[prefix + method];
            }
        }
    });

    return usablePrefixMethod;
};

既是方法执行(如果是方法),又是属性判断(是否支持属性),很实用,可以直接拷贝粘贴使用。

OK,这里所说的东西,其实上面几篇参考文章都有说过,没意思!现在目光转移到下面,呼吸一些新鲜的空气~~

三、FireFox/Chrome中的显示差异

表象的差异:
表象的差异就是是否支持全屏提示的差异了,FireFox浏览器是个大框框(参见上面截图),而Chrome浏览器下是个实色背景(参见下截图):
Chrome浏览器下是否允许全屏的提示 张鑫旭-鑫空间-鑫生活

浏览器生产商的喜好,没什么好说的。

更细致的差异:
如果您观察够仔细,您可能会发现,在全屏状态下,FireFox浏览器下点击界面的任意位置,都会回到正常状态;但是Chrome浏览器下,只有点击图片才能回到正常状态。下面两张图是同一位置,鼠标手形的差异对比:
FireFox浏览器下图片外部的鼠标手形 张鑫旭-鑫空间-鑫生活 Chrome浏览器图片外部的鼠标手形截图 张鑫旭-鑫空间-鑫生活

深层次的原因:
虽然,demo页面中,背景都是全屏的黑色,图片效果一样,高度60%放大显示,垂直且水平居中,但是,其背后实现的机制却是很不一样的。

FireFox浏览器对全屏元素进行的一些CSS属性的强设置,打开FireBug,查看系统默认样式,您会看到:
FireFox浏览器中默认对全屏元素的CSS设置 张鑫旭-鑫空间-鑫生活

也就是,元素宽高100%显示,黑色背景,固定定位——这也是为什么FireFox浏览器下点击屏幕任意位置会退出全屏——因为绑定了事件的全屏元素满屏显示了。

背景色非强设置,通过如下CSS,我们就可以进行修改:

:-moz-full-screen {
    background-color: #fff;
}

结果,就是下图这个样子:
FireFox浏览器下全屏背景白色的显示 张鑫旭-鑫空间-鑫生活

而Chrome浏览器下,虽然默认对全屏元素也有CSS设置,但是寥寥:
Chrome浏览器下全屏元素的默认CSS设置 张鑫旭-鑫空间-鑫生活

好吧,基本上就是两个酱油CSS设置,背景色还是白色的。

现在问题来了?为何两个浏览器默认的全屏CSS样式不一样,但是,都是黑色背景,图片垂直水平居中呢!!!

解释:FireFox浏览器下的黑色背景就是全屏元素,其中图片的居中对齐是通过CSS控制的(:after伪类生成元素+vertical-align:middle实现),例如去掉 text-align:center图片就不水平居中了;而Chrome的黑色背景属于系统的东西,其全屏元素似乎被浏览器劫持,默认状况下永远屏幕居中显示(去掉 text-align:center图片依然水平居中)——脱离了常规CSS理解——如默认的 display:block状态似乎变成了 display:inline-block等。

然而,我们是有办法让Chrome表现得跟FireFox浏览器一样地,就是增加一样FireFox浏览器默认有的样式,如:

:-webkit-full-screen {
    background-color: black;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

于是,这样子,即使在Chrome浏览器下,点击屏幕的任意位置,全屏状态都会退出!

原创文章,转载请注明来自 张鑫旭-鑫空间-鑫生活[ http://www.zhangxinxu.com]
本文地址: http://www.zhangxinxu.com/wordpress/?p=2679

(本篇完)

有话要说,点击 这里发表评论。

相关 [html5 api firefox] 推荐:

HTML5全屏API在FireFox/Chrome中的显示差异

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2679. 今天,在人人网上看同学晒得照片的时候,发现了这个按钮:. 我移了好几遍,没有 title提示. 图形也不具有代表性,一个圈圈意思是. 不敢点,点了不知道会发生什么,浏览器会不会关掉. 我思想斗争做了很久,终于弱弱地点了一下~~.

HTML5 API---使用WebAudio API播放音频文件

- - CSDN博客移动开发推荐文章
WebAudio API主要是为音频文件添加音效而设计的,但是它也可以用来播放音频文件,这类似于HTML5 audio元素的功能,只是audio元素可以有控制界面,用户可以点击界面上的播放/停止按钮来控制文件的播放,也可以拖动界面上的进度条来控制播放进度. 现在如果采用WebAudio来播放音频文件就不会有该限制,开发者可以任意控制音频文件的播放和停止,这对移动平台的上游戏开发者而言尤为重要.

AT&T公布HTML5 Web应用API

- - HTML5研究小组
北京时间1月10日消息,据国外媒体报道,AT&T首席营销官大卫·克里斯托弗(David Christopher)今天在该公司第六届开发者峰会公布了面向HTML5应用的API(应用编程接口)平台API Catalog. HTML5应用可以在多种设备和移动操作系统上运行.   iPhone版Visual Voicemail将是AT&T的首款网络API.

HTML5全屏API之网络钓鱼

- - ria之家--RIA三部曲:jquery、ext、flex
全屏API(请参考 W3C docs和 MDN docs)允许web开发工程师使浏览器的可视区与用户屏幕区域大小一致. 像youtube上全屏观看视频的效果;或者在facebook上全屏观看图片. 其实现在大多数浏览器都有全屏功能,允许用户来设置或操作. 但HTML5的全屏API与之不同,HTML5的全屏API允许web开发工程师在程序中调用.

HTML5 Web Speech API,让网站更有趣

- - SegmentFault 最新的文章
Web API 变得越来越丰富,其中一个值得注意的是 Web Speech API. 传统的网站只能“说”,这个API的出现,让网站能“倾听”用户. 这个功能已经开放了一系列的用法,非常棒. 在这篇文章中,我们将看一下这项技术和建议的用法,以及如何用它来增强用户体验的一些好例子. 声明:本技术比较前沿,目前该规范是W3C的“非官方编辑器的征求意见稿”(截至2014年6月6日).

Firefox 实现 HTML5 音视频 GStreamer 后端

- - LinuxTOY
得益于 GStreamer 后端的实现,未来 Firefox 将可以使用系统内置解码器实现 HTML5 音视频的解码和播放工作. 根据 该 Mozilla Bugzilla 上的追踪,目前用于 HTML5 音视频标签播放的 GStreamer 后端支持已经实现并且得到合并许可. 此举意味着 Firefox 将可以通过 GStreamer 作为中介,使用操作系统已经具备的解码包完成 HTML5 音视频的处理工作,带来了如下好处:.

纯HTML5打造:Firefox OS界面曝光

- - 脚本爱好者
  北京时间 7 月 20 日消息,今天. TechWeekEurope UK 上面曝光了一组由 Mozilla 推出的手机操作系统 Firefox OS 的最新照片. Mozilla 公司同时确认 Firefox OS 将在明年首先登陆拉丁美洲,随后会向欧洲及全球进行推广.   曝光的这组照片显示,由 HTML5 打造这款手机操作系统与 iPhone 有诸多相似之处.

HTML5基础,第3部分:HTML5 API的威力

- 大尾巴狼 - 译言-电脑/网络/数码科技
来源HTML5 fundamentals, Part 3: The power of HTML5 APIs. (译者注:由于yeeyan编辑器对文章中的标签做解析的原因,我在每个标签的空格,比如说,左尖括号<+head+右尖括号>,我会写成< head>,以便其能够在文章中正确显示,不便之处敬请谅解.

Filer.js:简化HTML5文件系统API开发的开源JS库

- - HTML5研究小组
在 W3C 的工作草案中,有一个雄心勃勃的底层 Web 标准开发计划即 HTML5 文件系统(Firesystem)API 规范. 所谓 Filesystm API 是一个提供在用户自定义的沙盒文件系统中读取与写入文件及目录的接口. 不过正如文件系统一样,该 API 代码较长而且复杂.   为此 Google Chorme 团队的工程师 Eric Bidelman 写了一个基于它的 JavaScript 包装库,Bidlelman 将其命名为 filer.js 并放在了 GitHub 上.

操纵历史,利用HTML5 History API实现无刷新跳转

- - 蓝飞技术部落格
有一次在上点点网的时候,发现登陆、注册动画效果非常华丽,但让我感到震惊的是页面竟能够实现无刷新跳转(已改版,观看此效果可以猛击此处: GitHub或 阅FM),回顾了所学的前端知识,似乎没有任何技术可以实现这一点,于是百度搜罗了一下,才发现这原来是使用HTML5中History API实现的效果,但奈何一直未曾派上用场.