<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. Android典型界面设计(5)——使用SlidingMenu和DrawerLayout分别实现左右侧边栏

    一.问题描述 侧边栏是Android应用中十分常见的界面效果,可随主屏在左侧或右侧联动,是特别适应手机等小屏幕特性的典型界面设计方案之一,常用作应用的操作菜单,如图所示 实现侧边栏可以使用第三方组件s ...

  2. android手势识别ViewFlipper触摸动画

    使用ViewFlipper来将您要来回拖动的View装在一起,然 后与GestureDetector手势识别类来联动,确定要显示哪个View,加上一点点动画效果即可.比如当手指向左快速滑动时跳转到上一 ...

  3. Gradle Build Tool

    转自知乎: nonesuccess 通俗的说:gradle是打包用的. 你觉得解决你的问题了吗?如果没解决,那是你的问题提得不够好.比如我猜你应该提:为什么要打包发布,打包发布有几种常见方法,为什么这 ...

  4. sqlserver修改主键为自增

    使用PowerDesigner创建一张表, 拷贝建表语句发现ID不是自增的, 以下是修改语句: ALTER TABLE USER_JOB_EXE_REC DROP COLUMN id; , ); 注: ...

  5. 如何查看Ubuntu下已安装包版本号

    之前的工作大部分在红帽企业版 下工作,查找安装包用rpm 很方便,但是由于这边大部分的服务器的运行环境是ubantu,补补. 在终端下也可以很方便查看已安装的软件包版本号,也能单独查看所需要的软件包是 ...

  6. Android Data Recovery for Mac（安卓数据恢复软件）破解版安装

    1.软件简介    Android Data Recovery 是 macOS 系统上一款 Android 设备数据恢复软件,能够帮助我们在 mac 电脑上对 Android 设备进行数据恢复,文档. ...

  7. R语言手册

    在R的官方教程里是这么给R下注解的:一个数据分析和图形显示的程序设计环境(A system for data analysis and visualization which is built bas ...

  8. PureFTP被动端口设置

    修改Pureftp的配置文件把 # PassivePortRange          30000 50000 把前面的#删除 重启pureftpd 注意把被动端口防火墙例外 如果是阿里云主机 安全规 ...

  9. 运行第一个Docker容器-Docker for Web Developers(1)

    1. Docker介绍 Docker由dotCloud公司发起的一个内部项目,后来Docker火了,dotCloud公司改名为Docker了: Docker使用了Go语言开发,基于 Linux 内核的 ...

  10. 微信小程序场景值

    场景值 基础库 1.1.0 开始支持,低版本需做兼容处理 当前支持的场景值有: 场景值ID 说明 1001 发现栏小程序主入口 1005 顶部搜索框的搜索结果页 1006 发现栏小程序主入口搜索框的搜 ...