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. 1) D. Zip-line 上升子序列 离线 离散化 线段树
D. Zip-line 题目连接: http://www.codeforces.com/contest/650/problem/D Description Vasya has decided to b ...
- 按树型显示BOM的结构
在制造企业中,生产的每一个产品都由一道或多道工序组成,在组成成品之前,每一道工序经由物料--物料组成半成品,或物料--半成品组成新的半成品,亦或由半成品--半成品组成新的半成品.复杂的成品经由多道工序 ...
- 利用require.js实现javascript模块化加载
这种引入很看到很想死吧! <script src="1.js"></script> <script src="2.js">& ...
- Unity-EasyTouch插件之ReservedArea的运用（主要是避免JoyStick与Touch的矛盾）
昨天有人问我,easytouch插件中有个小bug,其实也不算是bug,插件的设计者早就考虑到这样的情况. 他说同时用easyjoystick和easytouch会发生,移动摇杆的时候,touch(触 ...
- 十.spring-boot添加jsp支持
1.创建maven web project: 2.在添加web依赖 3.配置application.properties支持jsp 4.添加一个controller类 5.加入jsp页面 6.启动类 ...
- http://www.ruanyifeng.com/blog/2013/07/gpg.html
http://www.ruanyifeng.com/blog/2013/07/gpg.html
- phpcms的后台网站直接访问正常，百度快照收录链接访问跳转到非法网站
问题: phpcms制作的网站直接访问正常,百度快照收录链接访问跳转到非法网站 百度快照收录网站域名,访问时自动跳转到一个非法网站 检查静态页index.html,index.php 网页内引用 ...
- Linux 服务器环境启动
1.PHP 关闭php killall php-fpm php重启 /usr/local/php/sbin/php-fpm & 或者 /usr/local/php/sbin/php-fpm { ...
- Hadoop数据目录迁移
Hadoop数据目录迁移 @(Hadoop) 随着数据的不断导入和增大,原本集群部署的目录磁盘空间不足了,所以要把hadoop存储数据的位置迁移到另外一个巨大的磁盘上,另外的一个用意是将数据和程序分离 ...
- 【笔记】js原生方法 在元素外部或内部实现添加元素功能（类似jq 的 insert 和 append）
介绍的这个方法是:insetAdjacentHTML() 方法 此方法接收两个参数: 第一个参数必为下列值: beforebegin:在调用的元素外部的前面添加一个目标元素 afterend:在调用元 ...