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>