查看，设置，设备的 竖屏-横屏模式 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属性,它有 ...
随机推荐
- PHP ~与各加速工具的性能对比~
参与测试的加速器:Xcache,Opcache,hhvm Xcache简介 前面已经介绍了PHP加速器的原理和功用(参见LAMP架构之PHP-FPM 服务器),xcache作为目前使用广泛的PHP ...
- .NET 用 Unity 依赖注入——概述注册和解析类型（1）
本文内容 Unity 概述 环境 一个真实的例子 类型注册(Type Registrations) 解析类型(Resolving Types) 跳槽,新公司使用了 Unity,初步看了一下,公司的使用 ...
- Duplicate复制数据库并创建物理StandBy(spfile版本)
过程和Duplicate复制数据库并创建物理StandBy类似,只是不需要重启数据库. 目的:创建standby,不重启源数据库 1设定环境如下: Primary数据库 IP 172.17.22.16 ...
- EasyUI tab问题记录
1. 关闭当前tab 此代码放在 布局页中,然后所有的页面都可以随时关闭tab了,适当的根据你的项目,更改下js <script> function closetab(subtitle ...
- Django-启动文件的制作
在Django项目下的app.py中写入这几行代码,当启动的时候会找项目下名为:stark.py的文件并先加载 #app.py from django.apps import AppConfig cl ...
- [Big Data - Codis, Mycat（cobar）] 企业互联网+转型实战：如何进行PB级别数据的架构变迁
随着DT时代的来临,数据对于企业经营决策的价值日益凸显,而企业在进行互联网+转型的过程中,如何让数据架构平滑迁移到大数据平台,对于传统业务的转型升级至关重要.企业IT部门该如何进行PB级别大数据平台的 ...
- Asp.Net 导入Excel自动获取表名
public static DataSet ReadExcel(string Path, string fileType) { //服务器需要安装驱动 //http://download.micros ...
- [Android]Android数据的四种存储方式
存储方式 Android提供以下四种存储方式: SharePreference SQLite File ContentProvider Android系统中数据基本都是私有的,一般存放在“data/d ...
- mysql中update+select
mysql中不支持嵌套查询后更新操作. 但是可以使用inner join来解决自身的更新问题,参考如下例子: update hera_job a inner join( ),'"') as ...
- Android qualcomm WCNSS_qcom_cfg.ini 参数介绍
本文介绍WCNSS_qcom_cfg.ini中常用参数的作用. wifi 日志等级 vosTraceEnableBAP=255 vosTraceEnableTL=255 vosTraceEnableW ...