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. Linux的SIGUSR1和SIGUSR2信号

    SIGUSR1 用户自定义信号 默认处理:进程终止SIGUSR2 用户自定义信号 默认处理:进程终止  当一个进程调用fork时,因为子进程在开始时复制父进程的存储映像,信号捕捉函数的地址在子进程中是 ...

  2. Vista的MBR磁盘签名(Disk Signature) (转帖)

    原帖:Vista的MBR磁盘签名(Disk Signature)_存梦_新浪博客 http://blog.sina.com.cn/s/blog_6fed14220100qq71.html 存梦发表于( ...

  3. redis高可用(主从复制)

    熟练掌握redis需要从 reids如何操作5种基本数据类型,redis如何集群,reids主从复制,redis哨兵机制redis持久化 reids主从复制 的作用可以:实现数据备份,读写分离,集群, ...

  4. Centos7.5 安装高版本Cmake 3.6.2

    下载Cmake wget https://cmake.org/files/v3.6/cmake-3.6.2.tar.gz 解压Cmake tar xvf cmake-3.6.2.tar.gz & ...

  5. 自动配置pom文件,构建maven项目jar包依赖关系,找到jar包运用到jmeter

    首先说下pom文件特别方便的优点: 什么是pom文件? POM(Project Object Model) 是Maven的基础. 它是一个XML文件,包含了Maven用来build项目所需要的项目配置 ...

  6. eShopOnContainers 看微服务 ②:配置 启动

    一.什么是docker Docker 是一个开源项目,通过把应用程序打包为可移植的.自给自足的容器(可以运行在云端或本地)的方式,实现应用程序的自动化部署. 使用 Docker 的时候,需要创建一个应 ...

  7. 06 python下

    # st='hello kitty {name} is {age}' # # print(st.count('l')) # 统计元素个数 # print(st.capitalize()) # 首字母大 ...

  8. TCARS: Time- and Community-Aware Recommendation System(时间感知和社区感知推荐系统)

    随着用户在物品上产生了大量行为,推荐系统成为了线上系统的重要组成部分.推荐系统算法使用用户对物品的行为信息以及上下文数据为每个用户推荐一组物品.算法根据用户之间及物品之间的相似度建立.本文介绍了一个基 ...

  9. Python 进行查询日志查询条件分析

    任务:crm日志的查询条件  每次是哪几个字段查,有几种组合 ,统计每种组合查询的量 日志样例: -- ::] -- ::] 查询条件:query查询条件可以多个,用|and|分割. 步骤: 1.正则 ...

  10. python的相对导入

    最近断断续续学习flask,学到蓝本时候有点小问题卡住了,问题如下 导入包的时候py文件里使用了相对路径导入,但是这种导入方法不是很明白,就自己搜索加实验了终于有点眉目了 先定义一个包 adb包 这个 ...