js+css页面横屏
<!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页面横屏的更多相关文章
- 使Eclipse下支持编写HTML/JS/CSS/JSP页面的自动提示。
我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclip ...
- 配置Eclipse编写HTML/JS/CSS/JSP页面的自动提示。
我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclip ...
- 在jsp页面下, 让eclipse完全支持HTML/JS/CSS智能提示(转)
我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用ecl ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- 使用监听器解决路径问题，例如在jsp页面引入js,css的web应用路径
使用监听器解决路径问题,例如在jsp页面引入js,css的web应用路径 经常地,我们要在jsp等页面引入像js,css这样的文件,但是在服务器来访问的时候,这时间就有关到相对路径与绝对路径了.像网页 ...
- 配置Eclipse编写HTML/JS/CSS/JSP页面的自动提示
我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclip ...
- 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍，防止浏览器缓存
js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法 一.CSS和 ...
- Eclipse配置编写HTML/JS/CSS/JSP页面的自动提示
我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclip ...
随机推荐
- Java 用集合实现简单的斗地主发牌
创建数组.集合,存放数据 public class FightAgainstLandlords { /** * poker集合,存储54张牌 */ private ArrayList<Strin ...
- Java BIO NIO 与 AIO
回顾 上一章我们介绍了操作系统层面的 IO 模型. 阻塞 IO 模型. 非阻塞 IO 模型. IO 复用模型. 信号驱动 IO 模型(用的不多,知道个概念就行). 异步 IO 模型. 并且介绍了 IO ...
- CBV 序列化
一.模型表 from django.db import models # Create your models here. class Publish(models.Model): name = mo ...
- java.lang.UnsupportedOperationException: Manual close is not allowed over a Spring managed SqlSession
java.lang.UnsupportedOperationException: Manual close is not allowed over a Spring managed SqlSessio ...
- 12、python文件的操作
前言:本文主要介绍python中文件的操作,包括打开文件.读取文件.写入文件.关闭文件以及上下文管理器. 一.打开文件 Python open() 方法用于打开一个文件,并返回文件对象,在对文件进行处 ...
- T117897 七步洗手法 / PJT1（洛谷）
题目:现在有n个人需要依次使用1个洗手池洗手,进行一步洗手需要1单位时间.他们每个人至少会进行一步洗手,但是却不一定进行了完整的七部洗手. 现在你知道了他们总共的洗手时间为t,请你推测他们有多少人进行 ...
- laravel脚手架搭建项目问题之生产环境element-ui组件字体图标显示错误问题
问题描述: 1.element-ui组件使用的是npm安装 2.npm scripe模式开发 3.使用git命令行工具开发 3.开发环境下图标正常显示 4.生产环境下图标显示不正常 分析原因: 图标文 ...
- JS-07-函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CSS-10-内边距
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- win10打开相机提示我们找不到你的相机