JS检测移动端横竖屏

(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

时间: 2024-09-29 23:41:54

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

JS检测移动端横竖屏的代码

这篇文章主要介绍了JS检测移动端横竖屏的代码,需要的朋友可以参考一下 使用media来判断屏幕宽度遇到的问题: ios上当我旋转屏幕的时候可行,但是安卓机上没反应,横屏显示的还是我竖屏的样式. 查了一下资料,css3的media如果要在移动端有较好的显示效果,需要在页头加上这段代码 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-s

更靠谱的横竖屏检测方法

参考链接:http://www.cnblogs.com/zhansingsong/p/5866692.html 前不久,做了一个H5项目,需要在横竖屏变化时,做一些处理.毫无疑问,需要使用orientationchange来监听横竖屏的变化. 方案一: // 监听 orientation changes window.addEventListener("orientationchange", function(event) { // 根据event.orientation|screen

检测手机横竖屏切换

我们做移动端项目的时候,为了更好的完善用户体会,经常会需要处理好手机横竖屏时候的效果,下面看一下通过代码如何判断手机是否是横竖屏,两种方式: 一.第一种方式: <style type="text/css">body,html { margin: 0; height: 100%; position: relative; overflow: hidden;} #box { width: 100%; height: 100%; font-size: 20px; position:

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

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:     //手指放到屏幕上时触发 touchmove:      //手指在屏幕上滑动式触发 touchend:    //手指离开屏幕时触发 touchcancel:     //系统取消touch事件的时候触发,这个

移动端触屏滑动,JS事件

先了解下 移动端的触屏滑动 毕竟这玩意其实和PC端还是有一定的区别的 hh 整理了下网上的资料放一放 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:手指放到屏幕上时触发 touchmove:手指在屏幕上滑动式触发 touchend:手指离开屏幕时触发 touchcan

JS 判断ipad android 等移动设备横竖屏代码 源码--AangJava

废话不多说,直接进入正题! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <title> JS 判断ipad android 等移动设备横竖屏代码 源码--AangJava</

防止横竖屏时,iphone自动缩放的一段js代码

function orientation_change() {     var viewport = document.querySelector('meta[name="viewport"]');     if (window.orientation == 0 || window.orientation == 180)         viewport.setAttribute("content", "width=device-width, maximu

iphone手机不同版本兼容、横竖屏

/* 兼容问题*/ @media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){ .dialog-agreement-con{ height: 45%; /* iphone4*/ } } @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-dev

横竖屏任意切换 实战浅析

前话:前前后后弄了一下午,尝试各种解决方案(估摸有一二十种吧),最后误打误撞终于解决,鉴于在国内国外查找各种解决方法都未能解决,故有此文.(当然stackOverFlow 各种新奇的解决方案,我一一尝试实战,却未能解决,可能是英文还不够好,理解国外解决方案的不够透彻所致,不过稍感欣慰,还是解决了:不管黑猫白猫,能抓耗子就是好猫吧:还真是应了这句话) 需求:整个APP中界面以竖屏为主,且不能自动横竖屏切换,个别播放视频页面可以根据手机的方向横竖屏切换或固定横屏; 苹果系统支持横屏顺序默认读取pli