<!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. 干货！直击JVM底层 —— Java Class字节码文件解析

    目录 前言 如何阅读class文件 基本概念 无符号数&表 常量池 魔数(magic number) & 版本号 常量池 访问标志 类引索&父类引索&接口引索集合 字段 ...

  2. Map2Shp软件字符编码解决方案——彻底杜绝Shape格式乱码

    在使用Shape文件时,如果里面有中文属性信息时,经常会遇到属性信息变为乱码.尤其是ArcGIS10.2.1之后,Esri改变了软件的默认字符编码规则,打开之前保存的Shapefile文件,总会不时遇 ...

  3. MySQL 物理备份工具-xtrabackup

    安装 wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo yum -y install perl ...

  4. graphviz 的使用教程

    node 节点属性如下 : Name Default Values color black node shape color comment   any string (format-dependen ...

  5. Spring学习记录1——IoC容器

    IoC容器 1.1  IoC概述 Ioc(Inverse of Control,控制反转)是Spring容器的内核.对于软件来说,即某一接口具体实现类的选择控制权从调用类中移除,转交给第三方决定,即由 ...

  6. 安装Mysql 8.0的艰难体验

    背景: Mysql 8.0 以后版本,在性能等方面有了很大提升,而且在自动编号.Timestamp等字段的设置上有了很方便的进步,因此在一年前即开始将原有的基于5.5版本的服务器逐渐向8.0转移.但转 ...

  7. 动画 | 什么是平衡二分搜索树（AVL）？

    二分搜索树又名有序二叉查找树,它有一个特点是左子树的节点值要小于父节点值,右子树的节点值要大于父节点值.基于这样的特点,我们在查找某个节点的时候,可以采取二分查找的思想快速找到这个节点,时间复杂度期望 ...

  8. 【Four-Week-Task】四周学习CTF之第一周【寒假更新】

    写在最前:为了更好地系统学习CTF(楞头冲很惨 别问我怎么知道的 除非你是天才),决定先看再学,先正向再逆向. /* 出版排版规范中,标题序号等级为:第一级,一.二.三.(用顿号):第二级,(一).( ...

  9. 【Java并发基础】安全性、活跃性与性能问题

    前言 Java的多线程是一把双刃剑,使用好它可以使我们的程序更高效,但是出现并发问题时,我们的程序将会变得非常糟糕.并发编程中需要注意三方面的问题,分别是安全性.活跃性和性能问题. 安全性问题 我们经 ...

  10. 用tensorflow的Eager执行模式

    一.即时执行模式 import tensorflow as tfimport tensorflow.contrib.eager as tfetfe.enable_eager_execution() a ...