查看，设置，设备的 竖屏-横屏模式 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属性,它有 ...
随机推荐
- yum离线安装rpm包
CentOS利用yum下载好rpm包,并离线安装 1.联网安装好rpm包,并将下载好的包备好 #yum install --downloadonly --downloaddir=/home/sam ...
- C# Chart使用总结 1 ---------关于图表数据的来源
关于图表数据的来源: 1.通过XValueMember YValueMembers 设置 OleDbConnection conn = new OleDbConnection(connStr); Ol ...
- MySQL SELECT 执行的具体步骤
1:SELECT 执行的顺序 8SELECT 9DISTINCT <select_list> 1FROM <left_table> 3JOIN <right_table& ...
- SoapUI Pro Project Solution Collection-Test Step Object
Package com.eviware.soapui.model.testsuite used for access the current testsuite object, like test c ...
- 让WebService支持Get请求
在C#中,新建一个webservice,默认是post类型的.如果需要支持Get请求,需要对web.config文件进行配置 <system.web> <compilation de ...
- appium 后台运行shell脚本
appium 在后台运行,把启动appium命令保存为一个shell文件,文件名包含appium,如start_appium.sh.由于启动前要杀掉已经启动的appium服务, BUILD_ID=do ...
- MUI中等待框的H5实现
MUI没有内置的那个弹出转圈圈的那个等待框,那个nativeui.showwaiting是只能用于app中的,不能用在H5网页中的,网上找了下,找到个别人已经写好的,自己 测试了下没问题,先记下来 @ ...
- Linux内核修炼之framebuffer分析
Linux源代码包中/document/fb/framebuffer.txt有例如以下介绍: The frame buffer device provides an abstraction for t ...
- jsonp的工作原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 安装 Xshell 5/6 时出现.dll以及0xc000007错误的解决
安装 Xshell 5/6 时出现.dll以及0xc000007错误的解决 问题:缺少 mfc110.dll或者是其他.dll文件以及应用程序运行错误,如下所示. 方法: 一种是网上直接下载.(缺少. ...