查看，设置，设备的 竖屏-横屏模式 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属性,它有 ...
随机推荐
- AndroidStudio下加入百度地图的使用（四）——路线规划
上一章中我们已经完成了API常用的方法及常量属性的使用,这一章向大家介绍一下地图的重要功能-路线规划. (1) 定义API中的路线查询类: RoutePlanSearch mSearch = Rout ...
- 为什么和什么是 DevOps？
原文地址 本文内容 为什么 DevOps 什么是 DevOps DevOps 所带来的好处 如何将 DevOps 落到实处? 关于 DevOps 的澄清 参考资料 编写软件之所以难,是因为没有哪两个软 ...
- CentOS 安装 Hadoop 手记
Download & Install download hadoop from http://hadoop.apache.org/releases.html#Download downlo ...
- packageOfficialDebug和resourceFile does not exist.
Android Studio运行时候报packageOfficialDebug错误 报错信息为 Error:A problem was found with the configuration of ...
- eclipse:报错信息The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path
JavaWeb: 报错信息The superclass "javax.servlet.http.HttpServlet" was not found on the Java Bui ...
- ionic tab显示到顶部去了
添加配置调整显示位置 .config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) { $ionicConfigP ...
- 救基友3（三维BFS）
救基友记3 Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描写叙述 话说CZ因为不守基道.被妖怪抓走了.好基友WP在努力讨好高富帅 ...
- 基于Python的datetime模块和time模块源码阅读分析
目录 1 前言 2 datetime.pyi源码分步解析 2.1 头部定义源码分析 2.2 tzinfo类源码分析 2.3 date类源码分析 2.4 time类源码分析 2.5 timedelta ...
- Elasticsearch 开启
一.知识补充,摘抄,总结 1. Elasticsearch ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.E ...
- Visual Studio 统计代码行数
介绍一种简单的统计代码行数的小技巧, 使用正则表达式,用VS强大的查找功能 b[^:b#/]+.$ 最后结果: