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. Raspberry3B installation

    树莓派系统安装有两种方式,使用镜像安装和使用NOOBS安装.镜像方式安装传统,捣鼓的东西多一些.所以就使用NOOBS吧,NOOBS(New Out Of Box Software)开箱即用的,树莓派官 ...

  2. Failed to resolve: common Open File 导入项目问题

    Failed to resolve: common Open File  Warning:Configuration 'compile' is obsolete and has been replac ...

  3. 竖直的ViewPager，上下滑动的ViewPager，VerticalViewPager ；

    直接看代码吧,重写Viewpager,改变了手势和切换效果:和正常的Viewpager使用一模一样: /** * ChenboCui 竖向的Viewpager */ public class Vert ...

  4. 微信小程序 实现三级联动-省市区

    github项目地址   https://github.com/z1511676208/chooseAddr 序:项目中需要用到三级联动,自己试着写了下,也查了一些资料,现在把这个记录一下,里面地区数 ...

  5. 【Linux】【Selenium】安装Chrome和ChromeDriver的配置

    转自:https://www.cnblogs.com/longronglang/p/8078898.html 1.安装chrome sudo apt-get install libxss1 libap ...

  6. spark-1

    先测试搭好的spark集群: 本地模式测试: 在spark的目录下: ./bin/run-example SparkPi 10 --master local[2] 验证成功: 集群模式 Spark S ...

  7. js 模拟css3 动画2

    <html> <head> <title> javaScript缓动入门 </title> </head> <body> < ...

  8. get_time

    def get_current_time(): #将python的datetime转换为unix时间戳 dtime = datetime.datetime.now() un_time = time.m ...

  9. VC6的工程转到VC2010或更高版本出现fatal error C1189编译错误的解决方法

    以前也遇到过,当时解决了没写下来,这次正好又遇到了,就顺手写一下吧,别下次又忘记了. 当VC6的工程转到VC2010或更高版本时编译出现如下错误: c:\program files\microsoft ...

  10. (转)2018CRM系统最新排行榜

    https://www.jianshu.com/p/718cc29de91f 2018CRM系统最新排行榜 深谷幽兰呼 关注 2018.09.04 10:22 字数 1524 阅读 3182评论 0喜 ...