查看，设置，设备的 竖屏-横屏模式 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属性,它有 ...
随机推荐
- vs2010编译错误（报错：LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏）
报错:LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏 1> 这段时间忙于看文献,没用过VS了. 今天用着用着就报错了: LINK : fat ...
- Online
上线前的准备: 1.是在本地测试的时候,以为页面上没有php的warning代码就是正确的,没有查看apache的error_log中相关的记录,然后就直接上线了.
- PRTG参考价格
2010年的香港的网站上看到如下价格:http://kb.option-hk.com/?tag=prtg-network-monitor 什么才算一个sensor What counts as a s ...
- 你可能不知道的51个Linux经典命令
1.删除0字节文件 代码如下: find -type f -size 0 -exec rm -rf {} \; 2.查看进程按内存从大到小排列 代码如下: ps -e -o "%C : %p ...
- 使用Kotlin优雅的开发Android应用
来源:https://juejin.im/post/5915c0a744d904006c4e3bcd demo下载地址:https://github.com/xiehui999/KotlinForAn ...
- MFC总结之CListCtrl用法及技巧
复制于:http://www.cnblogs.com/lidabo/archive/2012/08/23/2652796.html 1.基本操作 分别从下面四点来介绍CListCtrl的基本操作: ① ...
- JSP 性能优化
无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载和执行 ...
- 微软自然语言理解平台LUIS：从零开始，帮你开发智能音箱
今年微软开发者大会Build 2017上展示了一款Invoke智能音箱,受到了媒体和大众的广泛关注.近两年,不少大公司纷纷涉足该领域,使得智能音箱逐渐成为一款热门的人工智能家用电器.智能音箱的兴起也改 ...
- ORA-214 signalled during: ALTER DATABASE MOUNT 问题
数据库服务器移动了位置,后来再连其数据库发现提示无法连接,大致为“无法为所有新实例创建连接...”,查看alert日志发现有如下错误: starting up 1 dispatcher(s) for ...
- pandas数组(pandas Series)-(5)apply方法自定义函数
有时候需要对 pandas Series 里的值进行一些操作,但是没有内置函数,这时候可以自己写一个函数,使用 pandas Series 的 apply 方法,可以对里面的每个值都调用这个函数,然后 ...