通过监听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 -判断、监听屏幕横竖屏切换事件的更多相关文章

  1. 解决Android手机 屏幕横竖屏切换

    Android中当屏幕横竖屏切换时,Activity的生命周期是重新加载(说明当前的Activity给销毁了,但又重新执行加载),怎么使屏幕横竖屏切换时,当前的Activity不销毁呢? 1. 在An ...

  2. Android屏幕横竖屏切换和生命周期管理的详细总结

    一般的我们去切换屏幕方向都是不希望Activity被重新创建,这时就需要对一些属性进行设置,或者使用代码设置.        今天想学一下Android屏幕横竖屏切换,但是网上很多知识不准确或不正确, ...

  3. 迅为4412开发板QtE系统源码-屏幕横竖屏切换修改方法

    迅为4412开发板QtE系统源码-屏幕横竖屏切换修改方法 详情了解:http://topeetboard.com 更多了解:https://arm-board.taobao.com/ 用户在开发板上运 ...

  4. Android 监听屏幕锁屏,用户解锁

    在做一个程序的时候,需要时刻保持某一服务是启动的,因此想到了通过监听屏幕SCREEN_ON和SCREEN_OFF这两个action.奇怪的是,这两个action只能通过代码的形式注册,才能被监听到,使 ...

  5. android:configChanges 屏幕横竖屏切换

    出处:http://blog.csdn.net/djy1992/article/details/9378195 --->  android:screenOrientation="por ...

  6. Android 监听屏幕锁屏&用户解锁

    在做视频播放器的时候,遇到一个问题,在用户播放视频然后锁屏之后,视频播放器仍然在继续播放,遇到类似手机系统状态改变的问题的时候,首先想到了广播,下面做个总结: public class ScreenL ...

  7. iOS监听tableView组头切换事件

    - (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSIntege ...

  8. iOS开发之判断横竖屏切换

    /** *  当屏幕即将旋转的时候调用 * *  @param toInterfaceOrientation 旋转完毕后的最终方向 *  @param duration  旋转动画所花费的时间 */ ...

  9. Android横竖屏切换重载问题与小结

    (转自:http://www.cnblogs.com/franksunny/p/3714442.html) (老样子,图片啥的详细文档,可以下载后观看 http://files.cnblogs.com ...

随机推荐

  1. [转]Windows7下如何在MyEclipse更改JSP默认编码

    分步阅读 一般情况下,用MyEclipse创建Web项目,在WebRoot目录下新建JSP页面,页面的编码格式是:ISO-8859-1,而这个编码格式不 可以解决多种语言文本显示问题,特别是中文,容易 ...

  2. 【转】记录PHP、MySQL在高并发场景下产生的一次事故

    看了一篇网友日志,感觉工作中值得借鉴,原文如下: 事故描述 在一次项目中,上线了一新功能之后,陆陆续续的有客服向我们反应,有用户的个别道具数量高达42亿,但是当时一直没有到证据表示这是,确实存在,并且 ...

  3. [译]SQL数据库迁移：从低版到高版本

    我见过太多的数据库管理员花大量的时间在数据库迁移上,即便在客户的实际环境亦是如此.由于微软频繁的发布新版,基于业务和客户的要求,应用服务不得不同时升级.当然,还有许多用户仍在使用SQL Server ...

  4. JS类型判断typeof PK {}.toString.call(obj)

    参考链接:https://www.talkingcoder.com/article/6333557442705696719 先看typeof <!doctype html> <htm ...

  5. 【SQL Sever】安装过程

    下载了sql sever,如下: 首先把iso解压,如下: 1.点击 2.打开页面后 3. 接下来直接下一步下一步 完成之后,需要重启计算机才能使用! 4. 重启之后,进入配置工具 将所有的端口号更改 ...

  6. matlab中cell array的理解

    1. matlab中有一个函数iscell() 用于判断一个数组是不是cell array 参考:MATLAB Function Reference iscell Determine whether ...

  7. nginx服务器URL无法自动添加index.php

    请教个nginx问题,添加try_files $uri $uri/index.php /index.php?$query_string;,类似www.mydomain.com/admin这样的URL可 ...

  8. Flask 在 Debug 模式下初始化2次

    请移步: http://blog.zengrong.net/post/2632.html https://stackoverflow.com/questions/9449101/how-to-stop ...

  9. iOS：CALayer核心动画层

    CALayer:核心动画层 简介: Core Animation 是跨平台的,支持iOS环境和Mac OS X环境 学习核心动画之前,需要先理解CALayer,因为核心动画操作的对象不是UIView, ...

  10. g++动态库静态库混合链接

    今天编译一个程序时报错: g++ -static -o echo.fcgi echo_adaptor.o echo.o -L/usr/local/lib/ -lfastcgipp -L/usr/lib ...