首页 > Web开发 > 详细

html5自动横屏的方法

时间:2019-11-13 21:15:20      阅读:425      评论:0      收藏:0      [点我收藏+]

html5自动横屏的方法
<pre>
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
 
 
 
window.addEventListener(evt, function() {
 
console.log(evt);
 
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%‘);
 
}
 
 
 
</pre>

html5自动横屏的方法

原文:https://www.cnblogs.com/newmiracle/p/11853044.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!