移动端强制横屏

//参数是jquery对象
changeOrientation($("html"))

function changeOrientation($print) {  
var width = document.documentElement.clientWidth;
var height =  document.documentElement.clientHeight;
if(width < height) {
    $print.width(height);
    $print.height(width);
    $print.css('top',  height / 2 );
    $print.css('left',  height/ 2 );
    $print.css('transform', 'rotate(90deg)');
    $print.css('transform-origin', height/2+"px " +height/2+"px");
} 

var evt = "onorientationchange" in window ? "orientationchange" : "resize";
    
    window.addEventListener(evt, function() {


    setTimeout(function() {
        var width = document.documentElement.clientWidth;
        var height =  document.documentElement.clientHeight;
      
        
  
      if( width > height ){
          $print.width(width);
          $print.height(height);
          $print.css('top',  0 );
          $print.css('left',  0 );
          $print.css('transform' , 'none');
          $print.css('transform-origin' ,  height/2+"px " +height/2+"px");
       }
       else {
        $print.width(height);
          $print.height(width);
          $print.css('top',  (height-width)/2 );
          $print.css('left',  0-(height-width)/2 );
          $print.css('transform' , 'rotate(90deg)');
          $print.css('transform-origin' ,  height/2+"px " +height/2+"px");
       }
  }, 300);    
 }, false);
}

 
  changeOrientation( 
  $( 
  "html")) 
 

 
  function 
  changeOrientation( 
  $print) { 
 
 
  var 
  width = 
  document. 
  documentElement. 
  clientWidth; 
 
 
  var 
  height = 
  document. 
  documentElement. 
  clientHeight; 
 
 
  if( 
  width < 
  height) { 
 
 
  $print. 
  width( 
  height); 
 
 
  $print. 
  height( 
  width); 
 
 
  $print. 
  css( 
  'top', 
  height / 
  2 ); 
 
 
  $print. 
  css( 
  'left', 
  height/ 
  2 ); 
 
 
  $print. 
  css( 
  'transform', 
  'rotate(90deg)'); 
 
 
  $print. 
  css( 
  'transform-origin', 
  height/ 
  2+ 
  "px " + 
  height/ 
  2+ 
  "px"); 
 

   } 
 

 
  var 
  evt = 
  "onorientationchange" 
  in 
  window ? 
  "orientationchange" : 
  "resize"; 
 

     
 
 
  window. 
  addEventListener( 
  evt, 
  function() { 
 


 
  setTimeout( 
  function() { 
 
 
  var 
  width = 
  document. 
  documentElement. 
  clientWidth; 
 
 
  var 
  height = 
  document. 
  documentElement. 
  clientHeight; 
 

     
 

     
 

     
 
 
  if( 
  width > 
  height ){ 
 
 
  $print. 
  width( 
  width); 
 
 
  $print. 
  height( 
  height); 
 
 
  $print. 
  css( 
  'top', 
  0 ); 
 
 
  $print. 
  css( 
  'left', 
  0 ); 
 
 
  $print. 
  css( 
  'transform' , 
  'none'); 
 
 
  $print. 
  css( 
  'transform-origin' , 
  height/ 
  2+ 
  "px " + 
  height/ 
  2+ 
  "px"); 
 

   } 
 
 
  else { 
 
 
  $print. 
  width( 
  height); 
 
 
  $print. 
  height( 
  width); 
 
 
  $print. 
  css( 
  'top', ( 
  height- 
  width)/ 
  2 ); 
 
 
  $print. 
  css( 
  'left', 
  0-( 
  height- 
  width)/ 
  2 ); 
 
 
  $print. 
  css( 
  'transform' , 
  'rotate(90deg)'); 
 
 
  $print. 
  css( 
  'transform-origin' , 
  height/ 
  2+ 
  "px " + 
  height/ 
  2+ 
  "px"); 
 

   } 
 

   }, 
  300);   
 

   }, 
  false); 
 

   } 
 

猜你喜欢