위챗 웹 페이지 전체 화면 구현
25930 단어 코드 생애
/*
*/
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();기능 함수는 사용자가 터치하여 터치해야만 효력이 발생한다