微信網頁全屏實現
阿新 • • 發佈:2019-01-23
/*
螢幕
*/
function Screen() {
//自動調整
this.resize = function (type, num) {
var setFontSize = function () {
var fontSize = 0;
switch (type) {
case 'width': {
fontSize = $(window).width() / num * 100;
}
break ;
case 'height': {
fontSize = $(window).height() / num * 100
}
}
$('html').css('font-size', fontSize + 'px');
};
setFontSize();
$(window).off('.Screen_resize')
.on('resize.Screen_resize', setFontSize) ;
};
//顯示方向
this.orientation = function (callback) {
if ('orientation' in window && 'onorientationchange' in window) {
var getOrient = function () {
if (window.orientation == 90 || window.orientation == -90) {
callback(true);
} else {
callback(false);
}
};
$(window).off('.Screen_orientation')
.on('orientationchange.Screen_orientation', getOrient);
} else {
var getOrient = function () {
if ($(window).width() > $(window).height()) {
callback(true);
} else {
callback(false);
}
}
$(window).off('.Screen_orientation')
.on('resize.Screen_orientation', getOrient);
}
getOrient();
};
//全屏顯示
this.full = function (callback) {
var element = $('body')[0];
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
setTimeout(callback, 300);
};
//退出全屏
this.unFull = function () {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
};
//旋轉螢幕
this.rotate = function (angle, status) {
var setAngle = function () {
if (status) {
var width = $(window).width();
var height = $(window).height();
var center = width / 2;
} else {
var height = $(window).width();
var width = $(window).height();
var center = height / 2;
}
$('body').css({
width: width + 'px',
height: height + 'px',
transform: 'rotate(' + angle + 'deg)',
transformOrigin: center + 'px ' + center + 'px'
});
}
setAngle();
$(window).off('.Screen_rotate')
.on('resize.Screen_rotate', setAngle);
};
}
var screen = new Screen();
var screen_full=function () {
screen.full(function () {
screen.orientation(function (status) {
console.log('screen.orientation');
if (status) {
screen.rotate(0, true);
screen.resize('height', 750);
} else {
screen.resize('width', 750);
screen.rotate(90);
}
});
});
}
screen.resize('width', 750);
screen_full();
export default {
screen_full:screen_full
}
screen_full();功能函式需要通過使用者點選觸發才能生效