(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. 基于STM32和W5500的Modbus TCP通讯

    在最近的一个项目中需要实现Modbus TCP通讯,而选用的硬件平台则是STM32F103和W5500,软件平台则选用IAR EWAR6.4来实现. 1.移植千的准备工作 为了实现Modbus TCP ...

  2. 无法打开之前cuda的vs项目,打开之后变灰色

    解决办法: 打开convolution_vs2010.vcxproj文件,将之前cuda 5.5全部改成cuda7.5. 就可以打开了.

  3. LeetCode之283. Move Zeroes

    ---------------------------------------------------------------------- 解法一:空间换时间 我使用的办法也是类似于"扫描 ...

  4. Sass中文乱码问题(手动编译和watch编译)

    一.sass手动编译出错 .scss文件中含有中文的时候编译报错(比如注释,比如字体栈),比如: foo.scss: 编译: 解决办法: 找到类似这个的路径的文件(仅供参考,不同环境可能不同): C: ...

  5. SVM实现邮件分类

    首先学习一下svm分类的使用. 主要有以下步骤: Loading and Visualizing Dataj Training Linear SVM Implementing Gaussian Ker ...

  6. 打开APK里的AndroidManifest.xml乱码

    直接解压apk,打开AndroidManifest.xml显示乱码,因为这里面是二进制字符,和打开文件的编辑器无关.(也可以用ultraedit打开查看,有明文显示.只是看起来搜起来不是很方便而已) ...

  7. 与你相遇好幸运,mocha接口测试

    var rest = require('restler');var assert = require("assert");var systemID;var userID; cons ...

  8. 【Java EE 学习 24 上】【注解详解】

    一.注解 1.所有的注解都是类. 2.所有的注解都是Annotation接口的子类. 接口摘要 Annotation 所有 annotation 类型都要扩展的公共接口. 3.定义方式 public ...

  9. ExtJS 中自定义类

    首先我们来看一看在Javascript中,是怎样自定义类的: var Person = function (name, age) { this.Name = ""; this.Ag ...

  10. centos yum安装saltstack

    1.导入安装源 centos5 rpm -Uvh http://ftp.linux.ncsu.edu/pub/epel/5/x86_64/epel-release-5-4.noarch.rpm cen ...