html屏幕旋转事件监听
近期做微信服务号开发，在做图片展示的时候需要横竖屏的检测实现图片大小不同的展示。
添加屏幕旋转事件侦听，可随时发现屏幕旋转状态（左旋、右旋还是没旋）。
摘自：http://bbs.phonegap100.com/thread-28-1-1.html
//js 判断屏幕是否旋转
4. 屏幕旋转事件：onorientationchange
添加屏幕旋转事件侦听，可随时发现屏幕旋转状态（左旋、右旋还是没旋）。例子：
// 判断屏幕是否旋转
function orientationChange() {
switch(window.orientation) {
case 0:
alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case -90:
alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 90:
alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
case 180:
alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
break;
};<br>};
// 添加事件监听
addEventListener('load', function(){
orientationChange();
window.onorientationchange = orientationChange;
});
我们在开发Mobile Web应用时，一个最佳实践就是采用流式布局，保证最大可能地利用有限的屏幕空间。
window.orientation属性与onorientationchange事件 window.orientation :这个属性给出了当前设备的屏幕方向，0表示竖屏，正负90表示横屏（向左与向右）模式 onorientationchange : 在每次屏幕方向在横竖屏间切换后，就会触发这个window事件，用法与传统的事件类似
1、使用onorientationchange事件的回调函数，来动态地为body标签添加一个叫orient的属性，同时以body[orient=landspace]或body[orient=portrait]的方式在css中定义对应的样式，这样就可以实现在不同的屏幕模式下显示不同的样式。如下代码示例：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
body[orient=landscape]{
background-color: #ff0000;
} body[orient=portrait]{
background-color: #00ffff;
}
</style>
</head>
<body orient="landspace">
<div>
内容
</div>
<script type="text/javascript">
(function(){
if(window.orient==0){
document.body.setAttribute("orient","portrait");
}else{
document.body.setAttribute("orient","landscape");
}
})();
window.onorientationchange=function(){
var body=document.body;
var viewport=document.getElementById("viewport");
if(body.getAttribute("orient")=="landscape"){
body.setAttribute("orient","portrait");
}else{
body.setAttribute("orient","landscape");
}
};
</script>
</body>
</html>
2、类似的思路，不通过CSS的属性选择器来实现，如下代码的实现方案：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
} .portrait body {
background-color: #00ffff;
}
</style>
</head>
<body orient="landspace">
<div>
内容
</div>
<script type="text/javascript">
(function(){
var init=function(){
var updateOrientation=function(){
var orientation=window.orientation;
switch(orientation){
case 90:
case -90:
orientation="landscape";
break;
default:
orientation="portrait";
break;
}
document.body.parentNode.setAttribute("class",orientation);
}; window.addEventListener("orientationchange",updateOrientation,false);
updateOrientation();
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</body>
</html>
使用media query方式
这是一种更为方便的方式，使用纯CSS就实现了对应的功能，如下代码演示：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
@media all and (orientation : landscape) {
body {
background-color: #ff0000;
}
} @media all and (orientation : portrait){
body {
background-color: #00ff00;
}
}
</style>
</head>
<body>
<div>
内容
</div>
</body>
</html>
低版本浏览器的平稳降级
如果目标移动浏览器不支持media query，同时window.orientation也不存在，则我们需要采用另外一种方式来实现————使用定时器“伪实时”地对比当前窗口的高(window.innerHeight)与宽(window.innerWidth)之比，从而判定当前的横竖屏状态。如下代码所示：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>按键</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
} .portrait body {
background-color: #00ffff;
}
</style>
<script type="text/javascript">
(function(){
var updateOrientation=function(){
var orientation=(window.innerWidth > window.innerHeight)? "landscape" : "portrait";
document.body.parentNode.setAttribute("class",orientation);
}; var init=function(){
updateOrientation();
window.setInterval(updateOrientation,5000);
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</head>
<body>
<div>
内容
</div>
</body>
</html>
统一解决方案
将以上的两种解决方案整合在一起，就可以实现一个跨浏览器的解决方案，如下代码：
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
} .portrait body {
background-color: #00ffff;
}
</style>
<script type="text/javascript">
(function(){
var supportOrientation=(typeof window.orientation == "number" && typeof window.onorientationchange == "object"); var updateOrientation=function(){
if(supportOrientation){
updateOrientation=function(){
var orientation=window.orientation;
switch(orientation){
case 90:
case -90:
orientation="landscape";
break;
default:
orientation="portrait";
}
document.body.parentNode.setAttribute("class",orientation);
};
}else{
updateOrientation=function(){
var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait";
document.body.parentNode.setAttribute("class",orientation);
};
}
updateOrientation();
}; var init=function(){
updateOrientation();
if(supportOrientation){
window.addEventListener("orientationchange",updateOrientation,false);
}else{
window.setInterval(updateOrientation,5000);
}
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</head>
<body>
<div>
内容
</div>
</body>
</html>
html屏幕旋转事件监听的更多相关文章
- HTML5-javascript屏幕旋转事件：onorientationchange
屏幕旋转事件:onorientationchange 添加屏幕旋转事件侦听,可随时发现屏幕旋转状态(左旋.右旋还是没旋) 判断屏幕是否旋转 function orientationChange() { ...
- 监听屏幕旋转事件window. onorientationchange
// 判断屏幕是否旋转 function orientationChange() { switch(window.orientation) { case 0: alert("肖像模式 0,s ...
- mvc-2事件监听
现代浏览器都支持的事件 click dbclick mouseover mousemove mouseout focus blur change(表单输入框特有) submit(表单特有) addEv ...
- jquery mobile 对手势触控提供了如下几个事件监听:
jquery mobile 对手势触控提供了如下几个事件监听: 复制代码代码如下: tap 当用户点屏幕时触发taphold 当用户点屏幕且保持触摸超过1秒时触发swipe 当页面被垂直或者水平拖动 ...
- java Gui编程 事件监听机制
1. GUI编程引言 以前的学习当中,我们都使用的是命令交互方式: 例如:在DOS命令行中通过javac java命令启动程序. 软件的交互的方式: 1. 命令交互方式 图书管理系统 ...
- GridView添加事件监听和常用属性解析
1. 使用流程 graph LR 准备数据源-->新建适配器 新建适配器-->绑定数据源 绑定数据源-->加载适配器 2. 常用属性 android:columnWidth:每一列的 ...
- Android软键盘的隐藏显示、事件监听的代码
把开发过程中重要的一些内容片段做个珍藏,如下资料是关于Android软键盘的隐藏显示.事件监听的内容,应该是对小伙伴们有所用途. public class ResizeLayout extends L ...
- PIE SDK地图鼠标事件监听
1.功能简介 地图鼠标事件包含鼠标的按下MouseDown(),弹起MouseUp(),移动MouseMove()等事件,通过这些事件可以对地图进行动态的操作,接下来以地图状态栏的信息为例具体介绍如何 ...
- JavaScript之屏幕上下左右滑动监听
前言 存在这么一个需求,根据用户在屏幕不同的滑动方向(上.下.左.右),使用js脚本判断出不同的滑动行为,更新网页为不同的界面. 源码 参考了博文[1]的源码,但由于存在一些漏洞,比如:上下滑动事件监 ...
随机推荐
- java 枚举 封装操作方法
前言: 由于刚转java项目,所以对于java语言比较陌生,尤其是lambda和一些诸如(一个java文件只能有一个public class)等等的零散知识点之类... 使我觉得就语言的层级来说..n ...
- Django时间时区问题（received a naive datetime while time zone support is active）
在django1.4以后,存在两个概念 naive time 与 active time. 简单点讲,naive time就是不带时区的时间,Active time就是带时区的时间. 举例来说,使用d ...
- 洛谷 P4284 [SHOI2014]概率充电器 解题报告
P4284 [SHOI2014]概率充电器 题目描述 著名的电子产品品牌SHOI 刚刚发布了引领世界潮流的下一代电子产品-- 概率充电器: "采用全新纳米级加工技术,实现元件与导线能否通电完 ...
- mybatis ${}与#{}的区别
#{}可以直接获取方法的参数: ${}从方法的参数中利用get方法来获取参数的属性值:
- 【bzoj2844】 albus就是要第一个出场
http://www.lydsy.com/JudgeOnline/problem.php?id=2844 (题目链接) 题意 给出${n}$个数,它们可以异或出${n^2}$个数,将这些数从小到大排列 ...
- 团体程序设计天梯赛-L3-021 神坛 的一些错误做法 和 一些想法
https://pintia.cn/problem-sets/994805046380707840/problems/994805046577840128 错误做法: 极角排序 + 最小三角形的两边是 ...
- python 基础数据类型之str
1.字符串去除空格 # S.strip(self, chars=None) #去除字符串两端空格# S.lstrip(self, chars=None) #去除字符串左端空格# S.rstrip(se ...
- python---基础知识回顾（二）(闭包函数和装饰器）
一.闭包函数: 闭包函数: 1.在一个外函数中定义了一个内函数 2.内函数里运用了外函数的临时变量,而不是全局变量 3.并且外函数的返回值是内函数的引用.(函数名,内存块地址,函数名指针..) 正确形 ...
- css原生变量var()
了解css/css3原生变量var 阮一峰css变量教程 深入学习css自定义属性(css变量)
- Spark记录-spark编程介绍
Spark核心编程 Spark 核心是整个项目的基础.它提供了分布式任务调度,调度和基本的 I/O 功能.Spark 使用一种称为RDD(弹性分布式数据集)一个专门的基础数据结构,是整个机器分区数据的 ...