1. 程式人生 > >微信網頁全屏實現

微信網頁全屏實現

/*
   螢幕
*/
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();功能函式需要通過使用者點選觸發才能生效