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>
