<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. 【Mac使用系列】常用软件及快捷键

    Mac下配置ss: 下载地址:https://github.com/shadowsocks/shadowsocks-iOS/releases 旧版本:https://blog.csdn.net/vqh ...

  2. MDX Cookbook 06 - GENERATE 循环遍历

    有时候需要从集合中取出特定的成员但是又不能执行遍历操作,这个时候就可以使用 GENERATE 函数来解决这个问题. 根据地区查询每年的销售额 - SELECT NON EMPTY { , NON EM ...

  3. 【VSCode】Windows下VSCode便携式c/c++环境

    http://blog.csdn.net/c_duoduo/article/details/52083494 Ver 1.1 完整版(修复mingw环境变量错误)下载: http://pan.baid ...

  4. Spring导出可以运行的jar包

    最近需要解决Maven项目导入可执行的jar包的问题,如果项目不包含Spring,那么使用mvn assembly:assembly即可,详情可以参考:http://www.cnblogs.com/l ...

  5. hive行转列

    一.问题 hive如何将 a ,, b , c 转化成为: a a a b b c 二.原始数据 cat row_column.txt a ,, b , c 三.解决方案 3.1 遍历每一列 3.1. ...

  6. hive 字段名称显示

    首先查看一个sql 1.首先存在一个数据表tmp CREATE TABLE tmp( platform string, channel string, chan_value string, uid s ...

  7. Windows批处理 调用程序后 不等待子进程 父进程继续执行命令

    从DOS过来的老鸟应该都知道批处理,这个功能在WINDOWS中仍然保留着.批处理 说白了就是把一系列DOS命令写在一个文本文件里,然后把这个文件命名为XXX.bat(WINXP以后的系统也可以命名为* ...

  8. Ubuntu18.04的网络管理netplan和防火墙ufw

    Netplan Ubuntu18.04使用的网络管理是netplan, 配置文件在/etc/netplan/下 刚安装完成的配置是这样的 刚安装完成的配置是这样的 network: ethernets ...

  9. [AaronYang]那天有个小孩跟我说Js-NodeJS[AY0]-EJS

    按照自己的思路学习Node.Js 随心出发.EJS是Node.js中express框架中使用的一个模版引擎,当然还有Jade 我的学习就靠网上查资料,没有买书系统学,自己整理,如果有用了哪位大神的代码 ...

  10. 第三部分：Android 应用程序接口指南---第二节：UI---第九章 搜索

    第9章 搜索 在android平台上搜索是一个核心的用户功能.无论内容位于设备或网络上,用户应该能够搜索任何对它们可用的数据.为了创建一个一致的用户搜索体验,Android平台提供了一个搜索框架帮助你 ...