脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js移动端横竖屏检测

JavaScript实现移动端横竖屏检测

 更新时间：2022年07月20日 14:42:11   作者：黎&&轩  
这篇文章主要为大家详细介绍了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>

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

您可能感兴趣的文章:

相关文章

  • 文件上传插件SWFUpload的使用指南

    文件上传插件SWFUpload的使用指南

    本文主要介绍了文件上传插件SWFUpload使用指南,SWFUpload是一个flash和js相结合而成的文件上传插件，其功能非常强大。需要的朋友可以参考下
    2016-11-11
  • JavaScript实现时间格式的切割与转换

    JavaScript实现时间格式的切割与转换

    这篇文章主要为大家详细介绍了使用JavaScript实现时间格式的切割与转换的相关知识,文中的示例代码讲解详细,有需要的小伙伴可以参考一下
    2024-04-04
  • JavaScript forEach 方法跳出循环的操作方法

    JavaScript forEach 方法跳出循环的操作方法

    这篇文章主要介绍了JavaScript forEach 方法跳出循环的操作方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-01-01
  • js实现单一html页面两套css切换代码

    js实现单一html页面两套css切换代码

    研究了一下JS的用setAttribute方法实现一个页面两份样式表的效果与大家分享下，感兴趣的朋友可以参考下哈，希望可以帮助到你
    2013-04-04
  • JavaScript实现横版菜单栏

    JavaScript实现横版菜单栏

    这篇文章主要为大家详细介绍了JavaScript实现横版菜单栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 纯JS实现本地图片预览的方法

    纯JS实现本地图片预览的方法

    这篇文章主要介绍了纯JS实现本地图片预览的方法,基于javascript插件实现本地图片预览功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JS call()及apply()方法使用实例汇总

    JS call()及apply()方法使用实例汇总

    这篇文章主要介绍了JS call()及apply()方法使用实例汇总,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • js实现权限树的更新权限时的全选全消功能

    js实现权限树的更新权限时的全选全消功能

    上一篇发了添加权限时的权限树JS源码，下面把更新时的也发给大家借鉴一下，因为更新时候牵扯到判断已有权限等，所以，还要麻烦一些。
    2009-02-02
  • 来自国外的页面JavaScript文件优化

    来自国外的页面JavaScript文件优化

    外部JavaScript文件块下载和伤害你的页面的性能，但有一个简单的方法来解决此问题：并行使用动态脚本标记和加载脚本，提高页面加载速度和用户体验。
    2010-12-12
  • Kindeditor单独调用单图上传增加预览功能的实例

    Kindeditor单独调用单图上传增加预览功能的实例

    下面小编就为大家带来一篇Kindeditor单独调用单图上传增加预览功能的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论