html5使用旋转强制横屏

| 阅读数:--次| 作者:html5,css3
摘要: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>
返回顶部
学到老代码浏览 关闭浏览