<!DOCTYPE html>

 <html lang='zh'>

     <head>

         <meta charset="utf-8" />

         <meta name="description" content="this is Web dome"/>

         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

         <title>js+css页面横屏</title>

         <link rel="stylesheet" charset="utf-8" href=""/>

         <style type="text/css">

             html{

               /*用于 获取 屏幕的可视宽高*/

               width: 100%;

               height: 100%;

               overflow:hidden;

             }

             body{

               /*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/

               position: fixed;

               left: 0;

               top: 0;

               width: 100%;

               height: 100%;

             }

             @media screen and (orientation:portrait){

               /*竖屏样式*/

               body {

                 transform-origin: 0 0;

                 transform:rotateZ(90deg) translateY(-100%);

                 -ms-transform-origin: 0 0;

                 -moz-transform-origin: 0 0;

                 -webkit-transform-origin: 0 0;

                 -o-transform-origin: 0 0;

                 -ms-transform:rotateZ(90deg) translateY(-100%);

                 -moz-transform:rotateZ(90deg) translateY(-100%);

                 -webkit-transform:rotateZ(90deg) translateY(-100%);

                 -o-transform:rotateZ(90deg) translateY(-100%);

               }

             }

             /*全屏样式*/

             #myvideo:-webkit-full-screen{

                 width:100%;

                 height:100%;

             }

         </style>

     </head>

     <body>

         <canvas id='cvsId'>请升级浏览器</canvas>

     </body>

 </html>

 <script type='text/javascript'>

 //横屏

 resize();

 function resize(){

     var body = document.getElementsByTagName('body')[0];

     var html = document.getElementsByTagName('html')[0];

     var width = html.clientWidth;

     var height =  html.clientHeight;

     var max = width > height ? width : height;

     var min = width > height ? height : width;

     body.style.width = max + "px";

     body.style.height = min + "px";

 }

 </script>

js+css页面横屏的更多相关文章

  1. 使Eclipse下支持编写HTML/JS/CSS/JSP页面的自动提示。

    我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclip ...

  2. 配置Eclipse编写HTML/JS/CSS/JSP页面的自动提示。

    我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclip ...

  3. 在jsp页面下, 让eclipse完全支持HTML/JS/CSS智能提示(转)

      我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用ecl ...

  4. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  5. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  6. 使用监听器解决路径问题，例如在jsp页面引入js,css的web应用路径

    使用监听器解决路径问题,例如在jsp页面引入js,css的web应用路径 经常地,我们要在jsp等页面引入像js,css这样的文件,但是在服务器来访问的时候,这时间就有关到相对路径与绝对路径了.像网页 ...

  7. 配置Eclipse编写HTML/JS/CSS/JSP页面的自动提示

    我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclip ...

  8. 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍，防止浏览器缓存

    js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法   一.CSS和 ...

  9. Eclipse配置编写HTML/JS/CSS/JSP页面的自动提示

    我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclip ...

随机推荐

  1. Task 线程重用导致等待！

    测试代码: ; i < ; i++) { var d = DateTime.Now; Task.Run(() => { Console.WriteLine($"{Thread.C ...

  2. Iaas/paas/saas 三种模式分别都是做什么?

    任何一个在互联网上提供其服务的公司都可以叫做云计算公司.其实云计算分几层的,分别是Infrastructure(基础设施)-as-a- Service,Platform(平台)-as-a-Servic ...

  3. Python的re模块，正则表达式用法详解，正则表达式中括号的用法

    Python的re模块,正则表达式 #导入re模块 import  re 1.match方法的使用: result = re.match(正则表达式,待匹配的字符串) 正则表达式写法: 第一部分: 字 ...

  4. 阿望教你用vue写扫雷（超详细哦）

    前言 话说阿望还在大学时,某一天寝室突然停网了,于是和室友两人不约而同地打开了扫雷,比相同难度下谁更快找出全部的雷,玩得不亦乐乎,就这样,扫雷伴我们度过了断网的一周,是整整一周啊,不用上课的那种,可想 ...

  5. Activiti结束事件（End Event）

    Activiti结束事件(End Event) 作者:Jesai -2017.08.03T01:03 曾经,黑夜多么漫长,八月雨扰眠,缘何? 声明:版权所有,如需引用请注明出处,如发现抄袭,必追究法律 ...

  6. “Your build settings specify a provisioning profile with the UUID “”, however, no such provisioning profile was found”

    解决方法: 终端命令行输入下面语句,删除所有的Profilescd ~/Library/MobileDevice/Provisioning\ Profiles/rm *.mobileprovision

  7. Djaingo 随机生成验证码(PIL)

    基础: https://www.cnblogs.com/wupeiqi/articles/5812291.html 实例: https://www.cnblogs.com/6324TV/p/88112 ...

  8. [bzoj5507] [洛谷P5305] [gzoi2019]旧词

    Descriptioin 浮生有梦三千场 穷尽千里诗酒荒 徒把理想倾倒 不如早还乡 温一壶风尘的酒 独饮往事迢迢 举杯轻思量 泪如潮青丝留他方 --乌糟兽/愚青<旧词> 你已经解决了五个问 ...

  9. if(a)是什么意思

    if(a)等价于 if(a!=0) if(!a)等价于 if(a==0)

  10. JSONArray 与 List 互转

    List 转 JSONArray // 通过JSONPath获取其中数据,也可以说自己生成的List List<JSONObject> caseList = JsonPath.read(r ...