html5使用旋转强制横屏
摘要：html5使用旋转强制横屏
html5代码
运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name="description" content="上电视 成明星，总决赛争夺50万现金大奖" />
<title>中国扑克大赛</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ background:#0c3b61;-webkit-transform:left top; overflow:hidden;}
#contain{width: 100%;}
#contain,#contain div,#contain div img{ display:block; width:100%;}
</style>
</head>
<body>
<div id="contain">
<div><img src="http://i1.sinaimg.cn/edu/2013/0201/U7516P42DT20130201135454.jpg" /></div>
<div><img src="http://i1.sinaimg.cn/edu/2013/0201/U7516P42DT20130201135454.jpg" /></div>
</div>
<script type="text/javascript">
window.onload = function(){
var contain = document.getElementById('contain');
var cheight = document.body.clientHeight ;
var body = document.getElementsByTagName('body').item(0);
var hw = window.innerWidth;
var hh = window.innerHeight;
if(window.orientation==180||window.orientation==0){
body.style.width = hh + 'px';
body.style.height = cheight+'px';
body.style.webkitTransform = body.style.transform = 'rotateZ(90deg)';
}else{
}
}
</script>
</body>
</html>
相关文章
最新发布
阅读排行
热门文章
猜你喜欢