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