(function () {
                                var supportOrientation = (typeof window.orientation === 'number' &&
                                typeof window.onorientationchange === 'object');
                                var init = function () {
                                    var htmlNode = document.body.parentNode,
                                    orientation;
                                    var updateOrientation = function () {
                                        if (supportOrientation) {
                                            orientation = window.orientation;
                                            switch (orientation) {
                                                case 90:
                                                case -90:
                                                    orientation = 'landscape'; //这里是横屏
                                                    //alert("横屏");
                                                    break;
                                                default:
                                                    orientation = 'portrait';//这里是竖屏
                                                    //alert("竖屏");
                                                    break;
                                            }
                                        } else {
                                            orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';
                                        }
                                        htmlNode.setAttribute('class', orientation);
                                    };
                                    if (supportOrientation) {
                                        // 每次旋转,调用这个事件。
                                        window.addEventListener('orientationchange', updateOrientation, false);
                                    } else {
                                        //监听resize事件
                                        window.addEventListener('resize', updateOrientation, false);
                                    }
                                    updateOrientation();
                                };
                                window.addEventListener('DOMContentLoaded', init, false);
                            })();

来源:http://www.jb51.net/article/85438.htm

JS检测移动端横竖屏的更多相关文章

  1. 【原】js检测移动端横竖屏

    摘要:上周做了一个小项目,但是要放到我们的app上,然而需要横竖屏使用不同的样式.横屏一套,竖屏一套.调用了手机APP那里的api,可是他们那里ios和安卓返回的不一样. 各种头疼.于是用了css3的 ...

  2. 用js实现web端录屏

    用js实现web端录屏 原创2021-11-14 09:30·无意义的路过 随着互联网技术飞速发展,网页录屏技术已趋于成熟.例如可将录屏技术运用到在线考试中,实现远程监考.屏幕共享以及录屏等:而在我们 ...

  3. js移动端横竖屏检测

    方法一:用resize事件来判断,利用屏幕的宽高比,来判断横竖屏 (兼容性较好) (function () { var updateOrientation = function () { var or ...

  4. js判断手机的横竖屏调整样式

    在移动端,我们经常遇到横竖屏的问题,所以我们改如何判断或针对横竖屏来写代码呢.首先需要在head中加入如下代码: <meta name="viewport" content= ...

  5. 移动端Web开发如何处理横竖屏

    <!Doctype html> <html> <head> <meta charset="utf-8"> <meta id=& ...

  6. JS案例之5——移动端触屏滑动

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

  7. JS禁止横竖屏切换,强制横竖屏显示

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

  8. 移动端触屏滑动,JS事件

    先了解下 移动端的触屏滑动 毕竟这玩意其实和PC端还是有一定的区别的 hh 整理了下网上的资料放一放 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等 ...

  9. JS -判断、监听屏幕横竖屏切换事件

    通过监听window.orientationchange事件,当横竖屏切换事件时触发 <!doctype html> <html> <head> <title ...

随机推荐

  1. Entity framwork的数据库分页

    网上查了很多,原以为多么复杂的事情,其实很简单: list = list.OrderBy(orderBy, ascending).Skip((pageIndex - 1) * pageSize).Ta ...

  2. monkeyrunner API接口文档内容

    用python编写脚本   1.导入模块: MonkeyRunner MonkeyDevice MonkeyImage ps:如果给导入模块起别名,就应该使用别名,而不能使用原名,否则会出现错误. f ...

  3. Quartz资源收藏

    项目中使用Quartz集群分享 : http://hot66hot.iteye.com/blog/1726143 发布 Quartz Job Scheduling Framework 中文 PDF 版 ...

  4. 标准模板库(STL)的一个 bug

    今天敲代码的时候遇到 STL 的一个 bug,与 C++ 的类中的 const 成员变量有关.什么,明明提供了默认的构造函数和复制构造函数,竟然还要类提供赋值运算符重载.怎么会这样? 测试代码 Tes ...

  5. 13.linux中断处理程序

    linux中断处理程序 一.中断处理流程 在linux内核代码中进入entry-armv.S目录: linux统一的入口:__irq svc. 进入了统一的入口之后,程序跳到irq_handler标号 ...

  6. 如何设置让基于matplotlib的绘图库正常的显示no-ascii字符(中文字符)

    添加一句: import matplotlib matplotlib.rc('font', family='simhei') 其中family直接指示字体名字就行,比如simhei 注意:如果不能正常 ...

  7. 桶装水 送水 消费充值PDA会员管理系统 介绍

    桶装水 送水 消费充值PDA会员管理系统 介绍 主要功能:会员管理临时开卡.新增会员.修改会员.删除会员场馆管理仓管信息管理.租凭信息管理会员卡管理会员卡类型设置.会员发卡.会员信息管理.体验用户发卡 ...

  8. python字符串

    字符串格式化 字符串格式化使用字符串格式化操作符%来实现:格式化字符串 % 值(字符串或者数字或者多个值的元组,字典) >>> format = "hello, %s. % ...

  9. php数组操作的基本函数

    数组的键名和值array_values($arr);获得数组的值array_keys($arr);获得数组的键名array_flip($arr);数组中的值与键名互换(如果有重复前面的会被后面的覆盖) ...

  10. winform 进程,线程

    进程:一个程序就是一个进程,但是也有一个程序需要多个进程来支持的情况 进程要使用的类是:Process它在命名空间:System.Diagnostics; 静态方法Start(); 点击按钮打开一个程 ...