js+css页面横屏

 1 <!DOCTYPE html>
 2 <html lang='zh'>
 3     <head>
 4         <meta charset="utf-8" />
 5         <meta name="description" content="this is Web dome"/>
 6         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
 7         <title>js+css页面横屏</title>
 8         <link rel="stylesheet" charset="utf-8" href=""/>
 9         <style type="text/css">
10             html{
11               /*用于 获取 屏幕的可视宽高*/
12               width: 100%;
13               height: 100%;
14               overflow:hidden;
15             }
16             body{
17               /*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/
18               position: fixed;
19               left: 0;
20               top: 0;
21               width: 100%;
22               height: 100%;
23             }
24             @media screen and (orientation:portrait){
25               /*竖屏样式*/
26               body {
27                 transform-origin: 0 0;
28                 transform:rotateZ(90deg) translateY(-100%);
29                 
30                 -ms-transform-origin: 0 0;
31                 -moz-transform-origin: 0 0;
32                 -webkit-transform-origin: 0 0;
33                 -o-transform-origin: 0 0;
34 
35                 -ms-transform:rotateZ(90deg) translateY(-100%);
36                 -moz-transform:rotateZ(90deg) translateY(-100%);
37                 -webkit-transform:rotateZ(90deg) translateY(-100%);
38                 -o-transform:rotateZ(90deg) translateY(-100%);
39               }
40             }
41             /*全屏样式*/
42             #myvideo:-webkit-full-screen{
43                 width:100%;
44                 height:100%;
45             }
46         </style>
47     </head>
48     <body>
49         
50         <canvas id='cvsId'>请升级浏览器</canvas>
51      
68     </body>
69 
70 
71 </html>
72 <script type='text/javascript'>
73 //横屏
74 resize();
75 function resize(){
76     var body = document.getElementsByTagName('body')[0];
77     var html = document.getElementsByTagName('html')[0];
78     var width = html.clientWidth;
79     var height =  html.clientHeight;
80     var max = width > height ? width : height;
81     var min = width > height ? height : width;
82     body.style.width = max + "px";
83     body.style.height = min + "px";
84 }
85 </script>
猜你喜欢
