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. PAT 乙级 1091 N-自守数 (15 分)

    1091 N-自守数 (15 分) 如果某个数 K 的平方乘以 N 以后,结果的末尾几位数等于 K,那么就称这个数为“N-自守数”.例如 3×92​2​​=25392,而 25392 的末尾两位正好是 ...

  2. Linux系统编程——信号

    目录 信号的介绍 信号的机制 信号的编号 Linux常规信号一览表 信号的产生 终端按键产生信号 硬件异常产生信号 kill函数/命令产生信号 信号的操作函数 信号集设定 sigprocmask函数 ...

  3. docker 学习(九) docker部署静态网站

    一:  dockerfile, 把Dockerfile和myfolder放在一个目录下: FROM httpd:2.4 COPY ./myfolder/ /usr/local/apache2/htdo ...

  4. CIF 搜索逻辑

    test code #include <cstddef> class CIF { }; template <typename OBJ> class CList { public ...

  5. centos7安装elasticsearch6.3.x集群并破解安装x-pack

    一.环境信息及安装前准备 主机角色(内存不要小于1G): 软件及版本(百度网盘链接地址和密码:链接: https://pan.baidu.com/s/17bYc8MRw54GWCQCXR6pKjg 提 ...

  6. 【亲测】502 Bad Gateway 怎么解决?

    502 Bad Gateway 怎么解决? 1.什么是502 badgateway 报错 简单来说 502 是报错类型代码,bad gateway 错误的网关. 2.产生错误的原因 连接超时 具体原因 ...

  7. linux如何复制文件夹和移动文件夹

    linux下文件的复制.移动与删除命令为:cp,mv,rm一.文件复制命令cp 命令格式:cp [-adfilprsu] 源文件(source) 目标文件(destination)cp [option ...

  8. 实战ELK(4)Metricbeat 轻量型指标采集器

    一.介绍 用于从系统和服务收集指标.从 CPU 到内存,从 Redis 到 Nginx,Metricbeat 能够以一种轻量型的方式,输送各种系统和服务统计数据. 1.系统级监控,更简洁(轻量型指标采 ...

  9. 英文文档帮查&翻译计划

    以CSDN为首,知乎其次,cnblog带路的一大批博客上充斥着大量低质量的编程入门教程,代码粗制滥造,毫无缩进,没有高亮,东抄西抄.初学者如果长期参照这种垃圾博客来解决问题,将会适得其反,走入歧途. ...

  10. leetcode1026

    public class Solution { Stack<int> S = new Stack<int>(); ; public void Trace(TreeNode ro ...