JS -判断、监听屏幕横竖屏切换事件
通过监听window.orientationchange事件，当横竖屏切换事件时触发
<!doctype html>
<html>
<head>
<title>Mobile Cookbook</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
padding: none;
margin: none;
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div id="a">
</div>
<script>
var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
}
}
document.addEventListener("gesturestart", gestureStart, false);
}
function gestureStart() {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
}
}
}
</script> <script>
$(window).bind('orientationchange',function(event){
updateOrientation(event.orientation);
})
function updateOrientation(orientation) {
$("#a").html("<p>"+orientation.toUpperCase()+"</p>");
}
</script>
</body>
</html>
效果图 - 竖屏：
横屏：
JS -判断、监听屏幕横竖屏切换事件的更多相关文章
- 解决Android手机 屏幕横竖屏切换
Android中当屏幕横竖屏切换时,Activity的生命周期是重新加载(说明当前的Activity给销毁了,但又重新执行加载),怎么使屏幕横竖屏切换时,当前的Activity不销毁呢? 1. 在An ...
- Android屏幕横竖屏切换和生命周期管理的详细总结
一般的我们去切换屏幕方向都是不希望Activity被重新创建,这时就需要对一些属性进行设置,或者使用代码设置. 今天想学一下Android屏幕横竖屏切换,但是网上很多知识不准确或不正确, ...
- 迅为4412开发板QtE系统源码-屏幕横竖屏切换修改方法
迅为4412开发板QtE系统源码-屏幕横竖屏切换修改方法 详情了解:http://topeetboard.com 更多了解:https://arm-board.taobao.com/ 用户在开发板上运 ...
- Android 监听屏幕锁屏,用户解锁
在做一个程序的时候,需要时刻保持某一服务是启动的,因此想到了通过监听屏幕SCREEN_ON和SCREEN_OFF这两个action.奇怪的是,这两个action只能通过代码的形式注册,才能被监听到,使 ...
- android:configChanges 屏幕横竖屏切换
出处:http://blog.csdn.net/djy1992/article/details/9378195 ---> android:screenOrientation="por ...
- Android 监听屏幕锁屏&用户解锁
在做视频播放器的时候,遇到一个问题,在用户播放视频然后锁屏之后,视频播放器仍然在继续播放,遇到类似手机系统状态改变的问题的时候,首先想到了广播,下面做个总结: public class ScreenL ...
- iOS监听tableView组头切换事件
- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSIntege ...
- iOS开发之判断横竖屏切换
/** * 当屏幕即将旋转的时候调用 * * @param toInterfaceOrientation 旋转完毕后的最终方向 * @param duration 旋转动画所花费的时间 */ ...
- Android横竖屏切换重载问题与小结
(转自:http://www.cnblogs.com/franksunny/p/3714442.html) (老样子,图片啥的详细文档,可以下载后观看 http://files.cnblogs.com ...
随机推荐
- Codeforces Round #345 (Div. 2) B. Beautiful Paintings 暴力
B. Beautiful Paintings 题目连接: http://www.codeforces.com/contest/651/problem/B Description There are n ...
- Educational Codeforces Round 9 A. Grandma Laura and Apples 水题
A. Grandma Laura and Apples 题目连接: http://www.codeforces.com/contest/632/problem/A Description Grandm ...
- 监控RTSP 流
rtsp://admin:admin12345@192.168.0.100/live1.sdp
- Delphi Xe10
http://blog.csdn.net/tht2009/article/details/48165371
- 基于tiny4412的Linux内核移植（支持device tree）（二）
作者信息 作者: 彭东林 邮箱:pengdonglin137@163.com QQ:405728433 平台简介 开发板:tiny4412ADK + S700 + 4GB Flash 要移植的内核版本 ...
- IntelliJ IDEA的几种常见的快捷键
在编写代码的时候直接输入psv就会看到一个psvm的提示,此时点击tab键一个main方法就写好了. psvm 也就是public static void main的首字母. 依次还有在方法体内键入f ...
- exVim安装
安装 安装必备 Vim 7.3 or higher. Vundle or Pathogen 下载/更新exVim 注意事项 安装exVim将不会覆盖你已经存在的Vim环境,这个仓库所包含的文件,变化, ...
- jquery中获取相邻元素相关的命令：next()、prev()和siblings()
jquery里我们要获取某个元素的相邻元素时,可以用到的命令有三个: next():用来获取下一个同辈元素. prev():用来获取上一个同辈元素. siblings():用来获取所有的同辈元素. 下 ...
- [Android-Demo]Android View的拖动
↑ 请善用目录 Demo下载地址:http://download.csdn.net/detail/u011634756/5959637 (免积分哦~) ------------------------ ...
- java实现折半排序算法
折半插入排序法,又称二分插入排序法,是直接插入排序法的改良版,也需要执行i-1趟插入,不同之处在于,第i趟插入,先找出第i+1个元素应该插入的的位置,假定前i个数据是已经处于有序状态. 折半插入排序( ...