移动端强制横屏

//参数是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);

}

转载于:https://www.cnblogs.com/liuhao-web/p/11304346.html