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. 阿里云轻量应用服务器 怎么控制怎么上传文件怎么安装JDK和Tomcat怎么完成JavaWeb的部署

    你是否遇到过这些问题,自己的javaweb项目本地运行一切正常,但是一旦转移到阿里服务器之类的.就出现以下问题. 1 jsp无法解析java类 2 Only a type can be importe ...

  2. Java遍历Map对象的方式

    public static void main(String[] args) { HashMap<String, String> testMap = new HashMap<> ...

  3. 记录一下我在lubuntu里面用到的工具

    文本编辑:Atom 文本对比:Beyond Compare 数据库工具:dbeaver Git工具:GitKraKen SVN工具:RapidSVN 网页编程工具:WebStorm 另外,14.04版 ...

  4. LeetCode【100. 相同的树】

    看到这道题,第一思考是结构和节点完全相同 第一次,就没有思考null的情况 if(p.val == q.val && p.left.val == q.left.val &&am ...

  5. c#继承 里氏转化原则

    继承: 是c#中面向对象一个重要概念: 用一个已经存在的类去定义一个新的类 新的类叫做   子类/派生类 已经存在的类叫做   父类/基类 c#中所以类的最终基类都是Object类 声明 访问修饰符  ...

  6. Linux安装rz/sz,htop插件

    Linux下rz/sz安装及使用方法 sz: 将选定的文件发送(send)到本地机器; rz:运行该命令会弹出 一个文件选择窗口, 从本地选择文件上传到服务器(receive). 下载安装包 lrzs ...

  7. 实验一：通过bridge-utils工具创建网桥并实现网络连接

    实验名称: 通过bridge-utils工具创建网桥并实现网络连接 实验环境: 实验要求: 安装bridge-utils工具,创建网桥br0,通过brctl命令,为网桥配置IP地址192.168.23 ...

  8. k8s学习笔记之四:资源清单定义入门

    第一章.k8s中的资源 1.什么叫资源? k8s中所有的内容都抽象为资源, 资源实例化之后,叫做对象 2.在k8s中有哪些资源? 工作负载型资源(workload): Pod ReplicaSet D ...

  9. cxf+spring+soap简单接口开发

    最近学了cxf框架开发webservice,简单搭了个接口,方便后续翻阅,本人才疏学浅,若有不足,请多多谅解! 一.服务端: 1.所用到的jar包: maven的pom.xml配置: <proj ...

  10. svn Advanced

    1.Eclipse last 1.Eclipse 安装subversive插件: 安装连接器: 打开视图"SVN Repositories": 创建“资源库位置”: 配置全局范围文 ...