JavaScript实现移动端横竖屏检测

本文实例为大家分享了JavaScript实现移动端横竖屏检测的具体代码，供大家参考，具体内容如下

一、HTML方法检测

在html中分别引用横屏和竖屏样式

<!-- 引用竖屏的CSS文件 portrait.css -->
  <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external nofollow"  >
  
  <!-- 引用横屏的CSS文件 landscape.css -->
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" rel="external nofollow"  >

二、CSS方法检测

css中通过媒体查询方法来判断是横屏还是竖屏

/* 竖屏 */
    @media screen and (orientation:portrait) {
      /* 这里写竖屏样式 */
    }
 
    /* 横屏 */
    @media screen and (orientation:landscape) {
      /* 这里写横屏样式 */
}

三、JS方法检测

【1】orientationChange事件

苹果公司为移动 Safari中添加了 orientationchange 事件，orientationchange 事件在设备的纵横方向改变时触发

window.addEventListener("orientationchange",function(){
        alert(window.orientation);
    });  

【2】orientation属性

window.orientation 获取手机的横竖的状态，window.orientation 属性中有 4个值：0和180的时候为竖屏（180为倒过来的竖屏），90和-90时为横屏（-90为倒过来的横屏）

0 表示肖像模式，90 表示向左旋转的横向模式（“主屏幕”按钮在右侧），-90 表示向右旋转的横向模 式（“主屏幕”按钮在左侧），180 表示 iPhone头朝下；但这种模式至今 尚未得到支持。如图展示了 window.orientation 的每个值的含义。

【3】案例

检测用户当前手机横竖屏状态，如果处于横屏状态，提示用户 “为了更好的观看体验，请在竖屏下浏览”，否则不提示

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #box {
      position: fixed;
      box-sizing: border-box;
      padding: 50px;
      display: none;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .5);
    }
 
    #box span {
      margin: auto;
      font: 20px/40px "宋体";
      color: #fff;
      text-align: center;
    }
  </style>
</head>
 
<body>
  <div id="box"><span>为了更好的观看体验，请在竖屏下浏览</span></div>
  <script>
    window.addEventListener("orientationchange", toOrientation);
    function toOrientation() {
      let box = document.querySelector("#box");
      if (window.orientation == 90 || window.orientation == -90) {
        // 横屏-显示提示
        box.style.display = "flex";
      } else {
        // 横屏-隐藏提示
        box.style.display = "none";
      }
    }
  </script>
</body>
 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript检测移动设备横竖屏

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

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

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

  • 更靠谱的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判断移动端横竖屏视口检测实现的几种方法

    目录 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

  • JavaScript实现移动端横竖屏检测

    JavaScript实现移动端横竖屏检测

    本文实例为大家分享了JavaScript实现移动端横竖屏检测的具体代码,供大家参考,具体内容如下 一.HTML方法检测 在html中分别引用横屏和竖屏样式 <!-- 引用竖屏的CSS文件 portrait.css -->   <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external no

  • javascript实现移动端触屏拖拽功能

    本文实例为大家分享了javascript实现移动端触屏拖拽的具体代码,供大家参考,具体内容如下 HTML: <body> <div id="div1"> </div> </body> CSS: <style media="screen"> * { margin: 0; padding: 0; } html,body { width: 100%; height:100%; } #div1 { width: 5

  • 解决Android横竖屏切换数据丢失问题的方法

    Android横竖屏切换时,当前的Activity会被销毁,然后Activity上面的数据将会全部丢失. 如Listview上面每个item的checkbox,横竖屏切换时,复选框就丢失所有选中信息. 解决方案1:在Androidmanifest.xml的activity标签中加入android:configChanges="orientation|keyboardHidden" <activity android:configChanges="orientation|

  • javascript实现移动端上的触屏拖拽功能

    javascript实现移动端上的触屏拖拽功能

    本文是分享了javascript实现移动端上的触屏拖拽功能,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initi

  • 使用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*/ }

  • Mobile Web开发基础之四--处理手机设备的横竖屏问题

    为了应对移动设备屏幕的碎片化,我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间.由于屏幕存在着方向性,用户在切换了屏幕的方向后,有些设计上或实现上的问题就会凸显--我们至少需要处理一下当前显示元素的宽度的适配(当然,要做的可能不仅仅是这个).很多时候,我们需要为不同的屏幕方向来设计对应的应用显示模式,这个时候,实时地获知设备的模竖屏状态就显得极为重要. window.orientation属性与onorientationchange事件 win

随机推荐