위챗 웹 페이지 전체 화면 구현

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();기능 함수는 사용자가 터치하여 터치해야만 효력이 발생한다

좋은 웹페이지 즐겨찾기