强制横屏demo

@media screen and (orientation: portrait) {

html{

width : 100% ;

height : 100% ;

background-color: white ;

overflow : hidden;

}

body{

width : 100% ;

height : 100% ;

background-color: red ;

overflow : hidden;

}

#print{

position : absolute ;

background-color: yellow ;

}

}

@media screen and (orientation: landscape) {

html{

width : 100% ;

height : 100% ;

background-color: white ;

}

body{

width : 100% ;

height : 100% ;

background-color: white ;

}

#print{

position : absolute ;

top : 0 ;

left : 0 ;

width : 100% ;

height : 100% ;

background-color: yellow ;

}

}

#print p{

margin: auto ;

margin-top : 20px ;

text-align: center;

}

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

window.addEventListener(evt, function() {

console.log(evt);

changeHW();

}, false);

$(document).ready(function(){

changeHW();

});

function changeHW() {

var width = document.documentElement.clientWidth;

var height = document.documentElement.clientHeight;

$print = $('#print');

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' , '50% 50%');

}

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' , '50% 50%');

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史