1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=UTF-8" />
    5. <meta name="viewport" content="width=device-width" />
    6. <title>手机横、竖屏事件</title>
    7. <script language="javascript" type="text/javascript">
    8. //屏幕方向标识，0横屏，其他值竖屏
    9. var orientation=0;
    10. //转屏事件，内部功能可以自定义
    11. function screenOrientationEvent(){
    12. if(orientation == 0)document.getElementById("change").value="竖";
    13. else document.getElementById("change").value="横";
    14. }
    15. var innerWidthTmp = window.innerWidth;
    16. //横竖屏事件监听方法
    17. function screenOrientationListener(){
    18. try{
    19. var iw = window.innerWidth;
    20. //屏幕方向改变处理
    21. if(iw != innerWidthTmp){
    22. if(iw>window.innerHeight)orientation = 90;
    23. else orientation = 0;
    24. //调用转屏事件
    25. screenOrientationEvent();
    26. innerWidthTmp = iw;
    27. }
    28. } catch(e){alert(e);};
    29. //间隔固定事件检查是否转屏，默认500毫秒
    30. setTimeout("screenOrientationListener()",500);
    31. }
    32. //启动横竖屏事件监听
    33. screenOrientationListener();
    34. </script>
    35. </head>
    36. <body onload="screenOrientationEvent()">
    37. <input id="change" type="text" value=""/>
    38. </body>
    39. </html>

注：js手机横竖屏事件实现的方法（不依赖任何其他库），从客户角度是违反了用户的自定义行为的。

转载-js如何设置网页横屏和竖屏切换的更多相关文章

  1. js如何设置网页横屏和竖屏切换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. sencha touch 在安卓中横屏、竖屏切换 应用崩溃问题

    答案来至于 Sencha Touch 交流 @周旭 这是由于横竖屏转换导致activity重跑onCreate方法导致的,有两种解决方案:1.横竖屏转换的时候不要重新跑onCreate方法,这个可以在 ...

  3. android 强制设置横屏 判断是横屏还是竖屏

    判断activity 是横屏还是竖屏  方法 1: //根据设备配置信息 Configuration cf= this.getResources().getConfiguration(); //获取设 ...

  4. 【转】Android 模拟器横屏竖屏切换设置

    http://blog.csdn.net/zanfeng/article/details/18355305# Android 模拟器横屏竖屏切换设置时间:2012-07-04   来源:设计与开发   ...

  5. js判断是横屏还是竖屏

    1通过在html中分别引用横屏和竖屏的样式: <link rel="stylesheet" media="all and (orientation:portrait ...

  6. 转载:Android横屏竖屏切换的问题

    一.禁止横竖屏转换 Android横竖屏切换在手机开发中比较常见,很多软件在开发过程中为了避免横竖屏切换时引发不必要的麻烦,通常禁止掉横竖屏的切换, 通过在AndroidManifest.xml中设置 ...

  7. js判断手机浏览器是横屏or竖屏

    移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 从而根据实际需求而执行相应的程序.通过添加监听事件onorientationc ...

  8. activity的横屏和竖屏设置

    主要在清单文件这样配置: <application android:allowBackup="true" android:icon="@drawable/ic_la ...

  9. [JS代码]如何判断ipad或者iphone是否为横屏或者竖屏 - portrait或者landscape

    //判断横屏或者竖屏 function orient() { //alert('gete'); if (window.orientation == 0 || window.orientation == ...

随机推荐

  1. STS启动时卡在loading加载 dashboard.ui

    如果你在用STS 3.4或3.5,启动时可能会卡在 解决方法:打开STS安装目录下的plugins目录,删除文件 org.springsource.ide.eclipse.dashboard.ui_3 ...

  2. MongoDB查询优化

    项目场景:Mongo在首次查询特慢,后面就好的.如果长时间不查询,下次开始的第一次又将非常慢,于是从链接当时多方面,排查最终发现还是mongo索引建的有问题. MongoDB在大批量数据查询时经常会遇 ...

  3. nginx支持ipv6

    今天碰到的问题是nginx对于ipv6的请求没有日志,顺便查了一下,nginx对ipv6的支持. nginx -v查看nginx是否支持ipv6,出现--with-ipv6,则是支持nginx的,否则 ...

  4. SQL查数据库有哪些触发器,存储过程...

    select name from sysobjects where xtype='TR' --所有触发器select name from sysobjects where xtype='P' --所有 ...

  5. 高阶函数map_reduce_sorted_filter

    能够把函数当成参数传递的参数就是高阶函数 map map: 功能: 拿iterable的每一个元素放入func中, func的返回值放入迭代器内进行返回 参数: iterable, func 返回: ...

  6. 八（第三篇）、主体结构元素——time元素、pubdate属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. java 性能测试框架工具-junitperf

    性能测试工具 对于 Java 开发者来说,要去学习性能测试工具未免很麻烦. 但有时候会有性能测试的需求. junitperf junitperf 就是一款为 Java 开发者设计的性能测试框架,如果你 ...

  8. 手把手教你如何用 OpenCV + Python 实现人脸识别

    下午的时候,配好了OpenCV的Python环境,OpenCV的Python环境搭建.于是迫不及待的想体验一下opencv的人脸识别,如下文. 必备知识 Haar-like 通俗的来讲,就是作为人脸特 ...

  9. 正则表达式re.sub替换不完整的问题现象及其根本原因

    title: 正则表达式re.sub替换不完整的问题现象及其根本原因 toc: true comment: true date: 2018-08-27 21:48:22 tags: ["Py ...

  10. 面试小结之Elasticsearch篇(转)

    最近面试一些公司,被问到的关于Elasticsearch和搜索引擎相关的问题,以及自己总结的回答. Elasticsearch是如何实现Master选举的? Elasticsearch的选主是ZenD ...