<body>

  <div id="doc"></div>

  <div id="model"></div>

  <script>

    let a = 0;

  if ('orientation' in screen) {

    document.getElementById('doc').textContent = `屏幕旋转了${a}次.`;

    document.getElementById('model').textContent = `当前为${screen.orientation.type}模式！`;

    screen.orientation.addEventListener('change', function () {// 监听屏幕的旋转

      a++;

      document.getElementById('doc').textContent = `屏幕旋转了${a}次.`;

      if (screen.orientation.type.startsWith('landscape')) {

        document.getElementById('model').textContent = `当前为横屏模式！`;

      } else {

        document.getElementById('model').textContent = `当前为纵向模式！`;

      }

    });

  }

  </script>

</body>

screen.orientation.lock 开发者主动切换 landscape 和 portrait 模式

对应的 screen.orientation.unlock();



<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->

<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->

<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->

<!--[if gt IE 8]><!-->

<html class="no-js">

<!--<![endif]-->

<html lang="zh-cmn-Hans">

<head>

  <meta charset="utf-8">

  <title>video 全屏体验</title>

  <link rel="shortcut icon" type="image/ico" href="" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!--移动端视图-->

  <meta name="renderer" content="webkit" />

  <meta name="keywords" content="ajanuw" />

  <!--关键词-->

  <meta name="description" content="ajanuw, b,c" />

  <!--网站内容描述-->

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <meta http-equiv="Pragma" content="no-cache" />

  <!--禁止浏览器从本地计算机的缓存中访问页面内容-->

  <meta http-equiv="Window-target" content="_top" />

  <!--强制页面在当前窗口以独立页面显示-->

  <meta http-equiv="content-Type" content="text/html;charset=utf-8" />

  <!--显示字符集的设定-->

  <meta http-equiv="Content-Language" content="zh-cn" />

  <!--显示语言的设定-->

  <meta http-equiv="imagetoolbar" content="false" />

  <!--指定是否显示图片工具栏，false不显示,true显示-->

  <link rel="icon" sizes="192x192" href="https://pic.cnblogs.com/avatar/1053296/20171128213246.png" />

  <link rel="apple-touch-icon" href="https://pic.cnblogs.com/avatar/1053296/20171128213246.png" />

  <meta name="msapplication-square310x310logo" content="https://pic.cnblogs.com/avatar/1053296/20171128213246.png" />

  <meta name="theme-color" content="#ff4081" />

  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

  <!-- Chrome, Firefox OS and Opera -->

  <link rel="apple-touch-startup-image" href="https://pic.cnblogs.com/avatar/1053296/20171128213246.png" />

  <style>

    .full-img {

      max-width: 100%;

    }

  </style>

</head>

<body>

  <!--[if lt IE 8]>  <h3>请升级你的浏览器，或更换主浏览器！！!</h3>  <![endif]-->

  <img class="full-img" src="http://per.kelantu.com/photos/1515232896-FnIf9c57Hf1-l7DUdBwlXdN1bcLv-orij0?e=3153600000&token=CT86R8zZYVXDyHWEWFoMX4pz0ksOzxtKCaC80si4:HcaTgLGmJ6IbOt_d9ZGOQIqtv6g="

    alt="">

  <div class="doc"></div>

  <script>

    let img = document.querySelector('.full-img');

    img.addEventListener('click', function (e) {

      if (document.requestFullscreen) {

        // 存在全屏 元素就退出全屏

        document.exitFullscreen();

      } else {

        requestFullscreenImage();

        lockScreenInLandscape();

      }

    }, false);

    function requestFullscreenImage() {

      if (img.requestFullscreen) {

        img.requestFullscreen();

      } else {

        img.webkitRequestFullscreen();

      }

    }

    function lockScreenInLandscape() {

      if (!('orientation' in screen)) {

        return;

      }

      // 判断当前 设备是 竖屏还是 横屏

      // portrait 竖屏

      // landscape 横屏

      if (matchMedia('(orientation: portrait) and (max-device-width: 768px)').matches) {

        // 竖屏就变 横屏

        screen.orientation.lock('landscape').then(function () {

          setTimeout(()=>{

            screen.orientation.unlock();

            // document.exitFullscreen();

            document.webkitExitFullscreen()

          }, 2000);

        });

      }

    }

  </script>

</body>

</html>

查看，设置，设备的 竖屏-横屏模式 screen.orientation的更多相关文章

  1. google 分屏 横屏模式 按home键界面错乱故障分析（二） 分屏的启动过程

    google 进入分屏后在横屏模式按home键界面错乱(二) 你确定你了解分屏的整个流程? imageMogr2/auto-orient/strip%7CimageView2/2/w/1240&quo ...

  2. Android开发 设备横屏与竖屏的详解

    需要了解横竖屏切换关键知识 1.在Android设备的横竖屏幕,每一次切换横竖屏其实是在重新创建Activity,Activity会重新走一遍生命周期.从onCreate 到 onDestroy 2. ...

  3. js 横屏 竖屏 相关代码 与知识点

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  4. app让个别界面横屏，其他的为竖屏，解决如下

    app让个别界面横屏,其他的为竖屏,解决如下 APP设置里面,一定要设置可以旋转的方向 appdelegate里面重新系统方向代理 func application(application: UIAp ...

  5. HTML5中判断横屏竖屏

    在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏.竖屏来写不同的代码呢. 这里有两种方法: 一:CSS判断横屏竖屏 写在同一个CSS中 1 2 3 4 5 6 @media s ...

  6. javascript判断手机旋转横屏竖屏

    javascript判断手机旋转横屏竖屏 // 横屏竖屏函数 function orientationChange(){ switch(window.orientation) { case 0: // ...

  7. swipe使用及竖屏页面滚动方法

    基于swipe4写了一个移动端的全屏滚动效果  但是图片始终不能自适应屏幕设备大小  这里记录一下 开始的时候要设置  移动端配置 <meta name="viewport" ...

  8. iOS 实现单个页面支持横竖屏,其他页面只能竖屏

    最近在自己的项目里面 有需要做一个需求 : app中某一个页面支持横竖屏, 而其他页面只能竖屏. 1 2 实现方法如下: 1 首先需要Xcode中选中支持的屏幕方向  2 Appdelegate中 . ...

  9. Android之设置横屏竖屏

    方案一:在AndroidManifest.xml中配置 在项目的AndroidManifest.xml中找到你所指定的activity中加上Android:screenOrientation属性,它有 ...

随机推荐

  1. C#代码安装Windows服务

    using System;using System.Collections.Generic;using System.ServiceProcess;using System.Configuration ...

  2. 快速排序partition过程常见的两种写法+快速排序非递归实现

    这里不详细说明快速排序的原理,具体可参考here 快速排序主要是partition的过程,partition最常用有以下两种写法 第一种: int mypartition(vector<int& ...

  3. 解决Nginx的13: Permission denied) while connecting to upstream

    一.问题 做Nginx负载的时候,经常遇到这样的情况: // :: [crit] #: * connect() to failed (: Permission denied) while connec ...

  4. list与Set、Map区别及适用场景

    1.List,Set都是继承自Collection接口,Map则不是 2.List特点: 元素有放入顺序,元素可重复 ,Set特点:元素无放入顺序,元素不可重复,重复元素会覆盖掉,(注意:元素虽然无放 ...

  5. Swap 分区的2种方式 详解与例子

    安装完Linux系统后,swap分区太小怎么办,怎么可以扩大Swap分区呢?有两个办法,一个是从新建立swap分区,一个是增加swap分区.下面介绍这两种方法: 第一您必须有root权限,过程中一定要 ...

  6. 【SqlServer】解析SqlServer的分页

    方式1: 假设页数是10,现在要拿出第5页的内容,查询语句如下: --10代表分页的大小 * from test where id not in ( --40是这么计算出来的:10*(5-1) id ...

  7. 11g新特性-自动sql调优(Automatic SQL Tuning)

    11g新特性-自动sql调优(Automatic SQL Tuning) 在Oracle 10g中,引进了自动sql调优特性.此外,ADDM也会监控捕获高负载的sql语句. 在Oracle 11g中, ...

  8. MapReduce实现矩阵乘法

    简单回想一下矩阵乘法: 矩阵乘法要求左矩阵的列数与右矩阵的行数相等.m×n的矩阵A,与n×p的矩阵B相乘,结果为m×p的矩阵C.具体内容能够查看:矩阵乘法. 为了方便描写叙述,先进行如果: 矩阵A的行 ...

  9. 并发和多线程-说说面试长提平时少用的volatile

    说到volatile,一些参加过面试的同学对此肯定不陌生. 它是面试官口中的常客,但是平时的编码却很少打照面(起码,我是这样的). 最近的面试,我也经常会问到volatile相关的问题,比如volat ...

  10. Mac下软件包管理器-homebrew

    类似于redhat系统的yum,ubuntu的apt-get,mac系统下也有相应的包管理容器:homebrew.用法与apt-get.yum大同小异,都是对安装软件做一些安装删除类的命令行操作,以下 ...