<!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. Oracle Autonomous Health Framework (AHF) 解读

    AHF介绍 Oracle在2019年10月18日发布自治健康框架Autonomous Health Framework (AHF) 19.3,将ORAchk,EXAchk,TFA三种诊断工具合并入AH ...

  2. gitbub 基本使用

    一.环境 git:https://git-scm.com/ 申请github账号:https://github.com/ 二.安装git 一直next即可 三.创储存建库 1.选择New reposi ...

  3. Django redis 应用

    一.自定义连接池 与python中使用连接池一样(使用单例对象) 注意:每个视图函数都要有 conn = redis.Redis(connection_pool=POOL) 二.使用第三方模块(dja ...

  4. Ubuntu16手动安装OpenStack——glance篇--转

    全文转自https://www.voidking.com/dev-ubuntu16-manual-openstack-glance/ 目标 紧接着<Ubuntu16手动安装OpenStack—— ...

  5. JavaScript学习之路1

    1. 变量类型只有var var money=5; var house="big house"; 示例如下 <!DOCTYPE html> <html> & ...

  6. SIR模型预测新冠病毒肺炎发病数据

    大家还好吗? 背景就不用多说了吧?本来我是初四上班的,现在延长到2月10日了.这是我工作以来时间最长的一个假期了.可惜哪也去不了.待在家里,没啥事,就用python模拟预测一下新冠病毒肺炎的数据吧.要 ...

  7. 【阿K学Python系列】一Python基础语法(二)

    前言 通过上一章的学习[阿k学Python]一Python入门(一),我们已经初步了解到Python是一种解释型.面向对象.动态数据类型的高级程序设计语言,当然也是一门脚本语言,像前端需要学习的Jav ...

  8. HTTP访问控制模块(HTTP Access)

    ·摘要这个模块提供简单的基于主机的访问控制.ngx_http_access_module这个模块可以详细的检查客户端IP,并且按顺序执行第一条匹配的规则.如下例: location / {  deny ...

  9. X-CTF(REVERSE高级) Reversing-x64Elf-100

    逻辑很简单,如果sub_4006FD函数返回假则返回Nice! 图1 进入sub_4006FD函数,加密过程也很简单,这里值得注意的有两点 一.8*(i%3)是二维数组的第一个参数,这里是取v3的地址 ...

  10. springcloud 依赖版本问题

    SpringCloud 版本: 版本名称 版本 Finchley snapshot版 Edgware snapshot版 Dalston SR1 当前最新稳定版本 Camden SR7 稳定版本 Br ...