使用JS判断移动端手机横竖屏状态

禁用用户自动缩放功能：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

判断横竖屏状态有两种方法：css判断、js判断

(一)、css判断横屏还是竖屏

1、写在同一个css文件中

@media screen and (orientation: portrait) {
 /*竖屏 css*/
}
@media screen and (orientation: landscape) {
 /*横屏 css*/
}

根据横竖屏设置大小时，正常页面尺寸常规书写即可，横屏样式单独设置。即只需在原有样式基础上添加横屏样式即可，

@media screen and (orientation: landscape) {
 /*横屏 css*/
}

当用户横屏时加载横屏样式，竖屏时取消横屏样式即加载默认样式。

2、分开写在两个css中，根据横竖屏引用不同样式文件：

根据横竖屏引用不同样式文件

横屏：

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" rel="external nofollow" >

竖屏：

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external nofollow" >

备注：css判断横竖屏是时时的可无缝衔接，即横屏加载横屏样式，竖屏加载竖屏样式，

（二）js判断横屏还是竖屏

//判断手机横竖屏状态：
  window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
    if (window.orientation === 180 || window.orientation === 0) {
      console.log("竖屏");
      $(".codeIg_s").removeClass('vercreen');//取消横屏样式
    }
    if (window.orientation === 90 || window.orientation === -90 ){
      console.log("横屏");
      $(".codeIg_s").addClass('vercreen');//添加横屏样式
    }
  }, false);

备注：横屏样式在vercreen类名下修改原默认样式，可正常使用，缺点是必须有横竖屏的切换状态才会触发。

如果用户默认是横屏状态时不会触发横屏条件判断，只有用户从横屏转为竖屏或者从竖屏转为横屏时才会触发相应条件判断。

没有切换状态时会不执行任何条件判断，此处不如css判断横竖屏全面。

总结

以上所述是小编给大家介绍的使用JS判断移动端手机横竖屏状态，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • js判断横竖屏及禁止浏览器滑动条示例

    复制代码 代码如下: var $horizontal = $('.horizontal_screen') ; //可自定义横屏模式提示样式 var $document = $(document) ; var preventDefault = function(e) { e.preventDefault(); }; var touchstart = function(e) { $document.on('touchstart touchmove', preventDefault); }; var

  • javascript判断iphone/android手机横竖屏模式的函数

    查了不少资料,最后结论如下: 复制代码 代码如下: function orientationChange(){ switch(window.orientation) { case 0: // Portrait case 180: // Upside-down Portrait // Javascript to setup Portrait view break; case -90: // Landscape: turned 90 degrees counter-clockwise case 90

  • JS和css实现检测移动设备方向的变化并判断横竖屏幕

    方法一:用触发手机的横屏和竖屏之间的切换的事件 复制代码 代码如下: window.addEventListener("orientationchange", function() { // 宣布新方向的数值 alert(window.orientation); }, false); 方法二:监听调整大小的改变 复制代码 代码如下: window.addEventListener("resize", function() { // 得到屏幕尺寸 (内部/外部宽度,内

  • javascript检测移动设备横竖屏

    如何判断 移动设备提供了两个对象,一个属性,一个事件: (1)window.orientation   属于window对象上一个属性:共有三个值 :0为竖屏模式(portrait),90为向左反转变为横屏模式(landscape),-90为向右反转变为横屏模式(landscape),最后180就是设备上下互换还是竖屏模式. (2)orientationchange     是一个event,在设备旋转时,会触发此事件,如同PC上使用的resize事件. 这两个搭配起来使用,很容易就能获得设备的

  • 更靠谱的H5横竖屏检测方法（js代码）

    更靠谱的H5横竖屏检测方法（js代码）

    前不久,做了一个H5项目,需要在横竖屏变化时,做一些处理.毫无疑问,需要使用orientationchange来监听横竖屏的变化. 方案一: // 监听 orientation changes window.addEventListener("orientationchange", function(event) { // 根据event.orientation|screen.orientation.angle等于0|180.90|-90度来判断横竖屏 }, false); 代码添加上

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

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

    使用media来判断屏幕宽度遇到的问题: ios上当我旋转屏幕的时候可行,但是安卓机上没反应,横屏显示的还是我竖屏的样式. 查了一下资料,css3的media如果要在移动端有较好的显示效果,需要在页头加上这段代码 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 可是这段代码我不能用.因为我

  • 使用JS判断移动端手机横竖屏状态

    禁用用户自动缩放功能: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 判断横竖屏状态有两种方法:css判断.js判断 (一).css判断横屏还是竖屏 1.写在同一个css文件中 @media screen and (orientation: portrait) { /*竖屏 css*/ }

  • js判断移动端横竖屏视口检测实现的几种方法

    目录 1.不同视口的获取方法 2.JavaScript检测横竖屏 3.CSS检测横竖屏 4.meta标签属性设置 5.meta标签属性设置设置刘海屏&底部小黑条 1.不同视口的获取方法 // 获取视觉视口大小(包括垂直滚动条) let iw = window.innerWidth, ih = window.innerHeight; console.log(iw, ih); // 获取视觉视口大小(内容区域大小,包括侧边栏.窗口镶边和调整窗口大小的边框) let ow = window.outer

  • js判断移动端是否安装某款app的多种方法

    本文实例讲解了js判断移动端是否安装某款app的多种方法,分享给大家供大家参考,具体内容如下 第一种方法: 一:判断是那种设备 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 二:安卓设备:原理:判断是否认识这个协议,认识则直接跳转,不认识

  • iOS监听手机锁屏状态

    iPhone的锁屏监测分为两种方式监听: 1. 程序在前台,这种比较简单.直接使用Darwin层的通知就可以了: #import <notify.h> #define NotificationLock CFSTR("com.apple.springboard.lockcomplete") #define NotificationChange CFSTR("com.apple.springboard.lockstate") #define Notifica

  • JS判断移动端访问设备并加载对应CSS样式

    JS判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的) 复制代码 代码如下: // 判断是否为移动端运行环境 if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-

  • js判断PC端与移动端跳转

    在网上看到很多这样类似的代码,但是有的很复杂,或者有的没有判断完全,上次经理去见完客户回来讲,使用苹果浏览打开pc端(pc已经做了识别跳转)会自动跳转到移动端的网页去,后来经测试才发现 document.writeln(" 是否为移动终端: "+browser.versions.mobile+"</br>");  //打印出来 true 所以在完整版的代码中 第一层if 判断一直是true 以上的原因是因为,网上流传的判断为: mobile: !! u.

  • JS判断客户端是手机还是PC的2个代码

    1.第一种: 复制代码 代码如下: function IsPC() {    var userAgentInfo = navigator.userAgent;    var Agents = ["Android", "iPhone",                "SymbianOS", "Windows Phone",                "iPad", "iPod"]; 

  • js判断是否是手机页面

    话不多说,请看代码: <script> if (/mobile/i.test(navigator.userAgent) || /android/i.test(navigator.userAgent)) document.body.classList.add('mobile'); window.addEventListener('load', function(event) { setTimeout(function () { hab('#sup-post-2'); hab('#gd1-inne

  • 移动端使用CSS或JS判断横屏和竖屏的讲解

    在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏.竖屏来写不同的代码呢. 首先在head中加入如下代码: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 针对上述viewport标签有如下说明 1).content中的width

随机推荐