需求在浏览器中上滑进入全屏模式，使用的hammer手势库。
var fullscreenEnable = function (){
var isFullscreen = document.fullscreenEnabled ||window.fullScreen ||document.webkitIsFullScreen ||document.msFullscreenEnabled;
var fullScreenElement = document.fullscreenEnabled || document.mozFullscreenElement || document.webkitFullscreenElement; // 当前处于全屏状态的元素 element.
var fullScreenEnabled = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled; // 标记 fullScreen 当前是否可用.
//注意：要在用户授权全屏后才能准确获取当前的状态
if(isFullscreen){
console.log(‘非全屏模式’);
}else{
console.log(‘全屏模式’);
}
}
onLoad(){
var hammerTest =new Hammer(document.documentElement);
hammerTest.get(‘swipe’).set({
direction: Hammer.DIRECTION_ALL
});
hammerTest.on('swipe swipeup press pressup swipedown', (ev)=> {
console.log(ev.type);
if(ev.type == "swipeup" || ev.type == "swipe"){//上滑
fullscreenEnable();
this.launchFullScreen( document.documentElement )//进入全屏
// hammerTest.off('swipe swipeup press pressup swipedown');
}else if(ev.type == "swipedown"){//下滑
this.exitFullscreen( document.documentElement );//退出全屏
}
});
}
全屏方法
/** 进入全屏*/
private launchFullScreen(element) {
window.scrollTo({top:0})
window.resizeTo(
window.screen.availWidth,
window.screen.availHeight
);
var e = e || event;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
/** 取消全屏*/
private exitFullscreen(element){
if(element.exitFullscreen){
element.exitFullscreen();
}else if(element.mozCancelFullScreen){
element.mozCancelFullScreen();
}else if(element.msExitFullscreen){
element.msExiFullscreen();
} else if(element.webkitCancelFullScreen){
element.webkitCancelFullScreen();
}
}
问题来了，，，，为啥在android浏览器上可以轻松通过手势进入全屏，在iphone 的google 和自带浏览器上进入不了全屏，，，，求大神的解决方法啊