查看，设置，设备的 竖屏-横屏模式 screen.orientation
<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的更多相关文章
- google 分屏 横屏模式 按home键界面错乱故障分析（二） 分屏的启动过程
google 进入分屏后在横屏模式按home键界面错乱(二) 你确定你了解分屏的整个流程? imageMogr2/auto-orient/strip%7CimageView2/2/w/1240&quo ...
- Android开发 设备横屏与竖屏的详解
需要了解横竖屏切换关键知识 1.在Android设备的横竖屏幕,每一次切换横竖屏其实是在重新创建Activity,Activity会重新走一遍生命周期.从onCreate 到 onDestroy 2. ...
- js 横屏 竖屏 相关代码 与知识点
<!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...
- app让个别界面横屏，其他的为竖屏，解决如下
app让个别界面横屏,其他的为竖屏,解决如下 APP设置里面,一定要设置可以旋转的方向 appdelegate里面重新系统方向代理 func application(application: UIAp ...
- HTML5中判断横屏竖屏
在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏.竖屏来写不同的代码呢. 这里有两种方法: 一:CSS判断横屏竖屏 写在同一个CSS中 1 2 3 4 5 6 @media s ...
- javascript判断手机旋转横屏竖屏
javascript判断手机旋转横屏竖屏 // 横屏竖屏函数 function orientationChange(){ switch(window.orientation) { case 0: // ...
- swipe使用及竖屏页面滚动方法
基于swipe4写了一个移动端的全屏滚动效果 但是图片始终不能自适应屏幕设备大小 这里记录一下 开始的时候要设置 移动端配置 <meta name="viewport" ...
- iOS 实现单个页面支持横竖屏,其他页面只能竖屏
最近在自己的项目里面 有需要做一个需求 : app中某一个页面支持横竖屏, 而其他页面只能竖屏. 1 2 实现方法如下: 1 首先需要Xcode中选中支持的屏幕方向 2 Appdelegate中 . ...
- Android之设置横屏竖屏
方案一:在AndroidManifest.xml中配置 在项目的AndroidManifest.xml中找到你所指定的activity中加上Android:screenOrientation属性,它有 ...
随机推荐
- 原创:vsphere概念深入系列四：Nic Teaming若干问题
参考文档:http://www.hyper-v.nu/archives/marcve/2013/01/lbfo-hyper-v-switch-qos-and-actual-performance-pa ...
- 各hbase版本对hadoop各版本的支持情况
http://hbase.apache.org/book/configuration.html#basic.prerequisites HBase-0.94.x HBase-0.98.x (Sup ...
- 【Java】MyBatis与Spring框架整合（二）
本文讲解 Spring 注入映射器及事务功能的实现. 注入映射器实现 MyBatis 可以使用 SqlSession 的 getMapper ( Class<T> type ) 方法,根据 ...
- 自动化测试中CSS SELECTOR选择器的一些写法
常见符号: #表示id .表示class >表示子元素,层级 一个空格也表示子元素,但是是所有的后代子元素,相当于xpath中的相对路径 #input 选择id为input的节点 .Volvo ...
- Gitbook 命令行工具
1.Gitbook 简介 1.1 Gitbook GitBook 是一个基于 Node.js 开发的命令行工具,使用它可以很方便的管理电子书,GitBook 是目前最流行的开源书籍写作方案. 使用 G ...
- JVM源码分析之Object.wait/notify实现（转载）
最简单的东西,往往包含了最复杂的实现,因为需要为上层的存在提供一个稳定的基础,Object作为java中所有对象的基类,其存在的价值不言而喻,其中wait和notify方法的实现多线程协作提供了保证. ...
- 11G新特性 -- 收缩临时表空间
当大任务执行完毕,并不会立即释放临时表空间.有时候通过删除然后重建临时表空间的速度可能更快.不过对于在线系统可能不会那么容易删除重建,所以11g中可以在线收缩临时表空间或单个临时数据文件. 收缩临时表 ...
- git代码统计
1.统计一段时间的代码量 git log --format='%aN' | sort -u | while read name; do echo -en "$name\t"; gi ...
- Spark 核心篇-SparkEnv
本章内容: 1.功能概述 SparkEnv是Spark的执行环境对象,其中包括与众多Executor执行相关的对象.Spark 对任务的计算都依托于 Executor 的能力,所有的 Executor ...
- CSS中的继承
继承:子元素继承父元素的样式,但是并不是所有属性都是默认继承的. 通过文档中的 inherited:yes 来判断属性是否可以继承,关于继承可以参见css的继承关键字: 一.无继承性的属性 1.dis ...