最近做项目用到全屏,现总结一下全屏:
1.局部全屏:H5全屏和F11有区别,在这种情况下判断全屏只需要通过H5全屏属性,无论全屏后有无滚动条都可判断。
/**
* [isFullscreen 判断浏览器是否全屏]
* @return [全屏则返回当前调用全屏的元素,不全屏返回false]
*/
function isFullscreen(){
return document.fullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement || false;
}
2.页面全屏:H5全屏和F11实现效果一样,根据浏览器可视区域与电脑屏幕大小做比较,但只能判断无滚动的页面。
function isFullscreenForNoScroll(){
var explorer = window.navigator.userAgent.toLowerCase();
if(explorer.indexOf('chrome')>0){//webkit
if (document.body.scrollHeight === window.screen.height && document.body.scrollWidth === window.screen.width) {
alert("全屏");
} else {
alert("不全屏");
}
}else{//IE 9+ fireFox
if (window.outerHeight === window.screen.height && window.outerWidth === window.screen.width) {
alert("全屏");
} else {
alert("不全屏");
}
}
}