<!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. mongodb学习（三）——函数使用的小技巧

    $group 下 $sum 函数 Returns a sum of numerical values. Ignores non-numeric values 只能对数字求和,非数字没有作用 查询一段时 ...

  2. 2、Vue实战-配置篇-npm配置

    引言: 如果刚开始使用 vue 并不了解 nodejs.npm 相关知识可以看我上一篇的实践,快速入门了解实战知识树. Vue实战-入门篇 上篇反思: 1.新的关注点:开发 vue 模板.如何使用本地 ...

  3. cogs 1298. 通讯问题 Tarjan

    1298. 通讯问题 ★★   输入文件:jdltt.in   输出文件:jdltt.out   简单对比时间限制:1 s   内存限制:128 MB [题目描述] 一个篮球队有n个篮球队员,每个队员 ...

  4. 干货！SQL性能优化，书写高质量SQL语句

    写SQL语句的时候我们往往关注的是SQL的执行结果,但是是否真的关注了SQL的执行效率,是否注意了SQL的写法规范? 以下的干货分享是在实际开发过程中总结的,希望对大家有所帮助! 1. limit分页 ...

  5. 《C# 爬虫 破境之道》：第二境 爬虫应用 — 第一节：HTTP协议数据采集

    首先欢迎您来到本书的第二境,本境,我们将全力打造一个实际生产环境可用的爬虫应用了.虽然只是刚开始,虽然路漫漫其修远,不过还是有点小鸡冻:P 本境打算针对几大派生类做进一步深耕,包括与应用的结合.对比它 ...

  6. 【聚类评价】Calinski-Harabaz（CH）

    Calinski-Harabaz(CH) CH指标通过计算类中各点与类中心的距离平方和来度量类内的紧密度,通过计算各类中心点与数据集中心点距离平方和来度量数据集的分离度,CH指标由分离度与紧密度的比值 ...

  7. 官方文档中文版！Spring Cloud Stream 快速入门

    本文内容翻译自官方文档,spring-cloud-stream docs,对 Spring Cloud Stream的应用入门介绍. 一.Spring Cloud Stream 简介 官方定义 Spr ...

  8. Docker安装之路

    从3月初到现在,一直在安装docker 的路上越走越远,大概就在1个小时前,我终于成功了,那一刻,我觉得我拥有了整个世界,于是乎,拥有了整个世界的我决定草率的并粗略的记录一下安装过程中遇到的我能记住的 ...

  9. html恶搞之无限弹窗

    啦啦啦啦啦 恶搞别人吗? 把下面代码做成html文件发给别人,用浏览器打开就可以看见效果了 <!DOCTYPE html> <html><head><meta ...

  10. 创建dynamics CRM client-side (七) - 用JS 来控制Auto-Save

    在我们的system setting里面, 我们可以设置打开/关闭 auto save的功能. 我们可以用js来控制auto-save this.formOnSave = function (exec ...