<!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. 悄摸直播（三）—— 搭建rtmp服务器（smart_rtmpd - rtmp服务器搭建）

    悄摸直播 -- javaCV实现本机摄像头画面远程直播 搭建rtmp服务器 一.素材 rtmp服务器:smart_rtmpd ffmpeg工具:ffmpeg.exe 二.搭建 1.下载smart_rt ...

  2. DWVA-关于反射型xss的漏洞详解<xss reflected>

    反射型xss low级别 代码如下: <?php header ("X-XSS-Protection: 0"); // Is there any input? if( arr ...

  3. mac-air 搭建vue开发环境

    周末没事干,自己搭建个vue环境. 我用的是mac-air,自带brew很好用. 要安装vue 得先安装node.js的包管理工具npm. brew install npm 等待安装完成,查看node ...

  4. cogs 1176. [郑州101中学] 月考 Set 做法

    1176. [郑州101中学] 月考 ★★☆   输入文件:mtest.in   输出文件:mtest.out   简单对比时间限制:1 s   内存限制:128 MB [题目描述] 在上次的月考中B ...

  5. MOS 常用链接地址

    主页面类  Exadata主页面 Exadata Database Machine and Exadata Storage Server Supported Versions (Doc ID 8888 ...

  6. Java.数据结构.集合体系详解

    I. 第一部分:常见数据结构 首先简单说下数据结构. 什么是数据结构?数据结构就是组织数据的方式. 常见的数据结构:栈,堆,树,图,数组,队列,链表. 这里主要介绍与java集合体系相关的栈.数组和链 ...

  7. 域渗透之票据传递攻击（pass the ticket，ptt）

    票据传递攻击(PtT)是一种使用Kerberos票据代替明文密码或NTLM哈希的方法.PtT最常见的用途可能是使用黄金票据和白银票据,通过PtT访问主机相当简单. 1.ptt攻击的部分 就不是简单的N ...

  8. linux操作系统下调试python代码方法

    一.python有调试工具pdb,可以用来进行代码调试. pdb的常用命令说明: l #查看运行到哪行代码 n #单步运行,跳过函数 s #单步运行,可进入函数 p 变量 #查看变量值 b 行号 #断 ...

  9. 团队作业-Alpha版本发布2

    团队项目-系统设计 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience/homework 这个作业要 ...

  10. c#数字图像处理（二）彩色图像灰度化，灰度图像二值化

    为加快处理速度,在图像处理算法中,往往需要把彩色图像转换为灰度图像,在灰度图像上得到验证的算法,很容易移植到彩色图像上.24位彩色图像每个像素用3个字节表示,每个字节对应着R.G.B分量的亮度(红.绿 ...