当前位置:   article > 正文

HTML5 之全屏(Full Screen API)

fullscreen 全屏的原理

技术日新月异,各大浏览器对 HTML5 的支持也越来越好,我们不妨大胆的使用 HTML5 API 来提升用户体验。这一节我们来看看 Full Screen API 的使用及原理。

一、使用场景

1.当我们看视频的时候,为提升用户体验,可能会需要视频窗口全屏化;
2.如果你恰好在对接地图业务,一张全屏的地图可能会更有视觉冲击力;
3.动态展示图片或动画全屏预览;

场景很多,但是使用 Full Screen API 一行代码就搞定了:

1
$('.your-container')[0].webkitRequestFullscreen();

是不是很酷,当然,这只适用与 webkit 内核浏览器的情况,而且还是最理想状态

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/145295
推荐阅读
相关标签