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 ...
随机推荐
- MapGIS文件如何压缩存盘
经过多次编辑修改的MapGIS数据,含有大量逻辑上已删除的节点或图元,数据冗余复杂, 在转换过程前应注意一定要采用压缩存盘方式处理,目的是确保编辑状态已删除的数据真正从物理存储层删除,以确保数据的精简 ...
- docker制作cenos+php56+nginx镜像
首先你环境要安装好docker 1 获取centos镜像. docker search centos 选取第一个官方镜像. docker pull docker.io/centos 新建镜像挂载目录 ...
- spring注入相关注解
本次主要整理四个注解 @ComponentScan.@Scope.@Conditional.@Import 1. @ComponentScan(value = "com.xiaoguo&qu ...
- Spring Cloud Eureka------详解
一 Eureka服务治理体系 1.1 服务治理 服务治理是微服务架构中最为核心和基础的模块,它主要用来实现各个微服务实例的自动化注册和发现. Spring Cloud Eureka是Spring Cl ...
- 使用RobotFramework的JavaRemoteLibrary
终于被迫使用了Java的远程接口库(为了同时使用Java和python的用例库,且为了在pybot下跑速度能快一些),路途比实际想的要坎坷,记录下来. 远程库的原理在前边一篇文章中记录过: http: ...
- python 栈
栈的特点:先进后出 class Stack: def __init__(self): self.data = [] def push(self, val): self.data.append(val) ...
- 如何高效实用 Git
Git 工作流 只要项目是多人参与的,那么就需要使用正确的 Git 工作流程. 下面介绍一个简单有效的工作流程. 场景 假设有一个项目,要开发下一代的 Facebook,你就是这个项目的技术 lead ...
- Java框架之MyBatis 06-全局配置-mapper映射-分步查询
MyBatis MyBatis是Apache的一个开源项目iBatis, iBatis一词来源于“internet”和“abatis”的组合,是一个基于Java的持久层框架. iBatis 提供的持 ...
- python类型-序列-元组
元组是一种不可变类型,元组可用作一个字典的key. 1.创建一个元组并进行赋值 atuple = (123, 'abc', ('inner', 'tuple'), 7-9j) 2.访问元组中的值 元组 ...
- lind 语 api 数据的安全性 第四弹
web api的安全性怎么保证呢. 一般公司会自己封装一套请求的规范. 下面来看看lind语里的webapi安全规范 step one 先看下 diagram: 学而思: 从上面的图分析一下: 如果我 ...