Fullscreen API All In One
Fullscreen API All In One
全屏显示
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide
https://fullscreen.spec.whatwg.org/
document.addEventListener("keypress", function(e) {
if (e.keyCode === 13) {
toggleFullScreen();
}
}, false);
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
demo
iPhone 12 Pro Green Screen Checker
https://cdn.xgqfrms.xyz/apple/screen-checker/index.html
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="xgqfrms">
<meta name="generator" content="VS code">
<title>iPhone 12 Pro Green Screen Checker</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
position: relative;
background: #000;
color: #fff;
width: 100vw;
height: calc(100vh - 100px);
}
header {
margin: 10px auto;
display: flex;
align-items: center;
justify-content: center;
}
footer {
position: fixed;
bottom: 50px;
width: 200px;
left: calc(50vw - 100px);
display: flex;
align-items: center;
justify-content: center;
color: #0f0;
}
</style>
<!-- <link rel="stylesheet" href="./index.css"> -->
</head>
<body>
<header>
<h1>iPhone 12 Pro Green Screen Checker</h1>
</header>
<main>
</main>
<footer>
<p>copyright© xgqfrms 2020</p>
</footer>
<!-- js -->
<script>
const log = console.log;
const screen = document.querySelector(`body`)
screen.addEventListener("click", function(e) {
toggleFullScreen();
}, false);
document.addEventListener("keypress", function(e) {
if (e.keyCode === 13) {
toggleFullScreen();
}
}, false);
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
</script>
</body>
</html>
https://mdn.github.io/dom-examples/fullscreen-api/index.html
refs
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
Fullscreen API All In One的更多相关文章
- 全屏显示网页FULLSCREEN API
第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性 ...
- Fullscreen API与DOM监听API
前言 以下几个API,在web开发中可以简化我们一部分交互操作. Fullscreen API 有时候我们想要全屏预览的效果,比如类似于图片预览.幻灯片播放等.全屏API是一个很好的选择. 基本用法 ...
- 封装Html5 Fullscreen API
复制前言: 使用新的全屏 API,可以将用户的注意力导向特定元素,同时隐藏背景或转移对其他应用的注意力.因为W3C全屏规范还未达到最终版本,所以大多数浏览器供应商都使用唯一标识符为 API 添加前缀. ...
- HTML5全屏(Fullscreen)API详细介绍
// 整个页面 onclick= launchFullScreen(document.documentElement); // 某个元素 launchFullScreen(document.get ...
- Fullscreen API 全屏显示网页
可参考文档:http://blog.csdn.net/tywali/article/details/8623938 脚本代码 <script type="text/javascript ...
- Fullscreen API：全屏操作
function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } ...
- Native Fullscreen JavaScript API (plus jQuery plugin)
http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ HTML5 <video> is gre ...
- html5常用API之Full Screen
所谓Full Screen API,就是全屏API,在html5中,该API允许开发者以编程方式将Web应用程序全屏运行,使Web应用程序更像本地应用程序.这款API十分简单有用,是html5初学者必 ...
- 另5个你不知道的HTML5接口API
原文地址: 5 More HTML5 APIs You Didn’t Know Existed 演示地址: 全屏API Demo 原文日期: 2012年11月08日 翻译日期: 2013年08月13日 ...
随机推荐
- 夯实基础系列四：Linux 知识总结
前言 前三节内容传送门: 夯实基础系列一:Java 基础总结 夯实基础系列二:网络知识总结 夯实基础系列三:数据库知识总结 现在很多公司项目部署都使用的是 Linux 服务器,互联网公司更是如此.对于 ...
- jemeter断言和性能分析
一.添加断言 1.原因:检查是否有该结果,一般一个请求过去除了400和500的只要通过的都会代表请求成功,比如登录页面及时填写了错误密码,虽然会返回密码错误,但这个请求还是成功的,所以我们要添加断言, ...
- leaving sockets open which can trigger a ResourceWarning in some # cases, and look like a memory leak in others
# -*- coding: utf-8 -*- """ requests.api ~~~~~~~~~~~~ This module implements the Requ ...
- （Sql Server）Soundex语音算法
Soundex是一种语音算法,利用英文字的读音计算近似值,值由四个字符构成,第一个字符为英文字母,后三个为数字.在拼音文字中有时会有会念但不能拼出正确字的情形,可用Soundex做类似模糊匹配的效果. ...
- memset 在c++中使用细节注意
C语言,在利用struct进行数据封装时,经常会使用memset(this,0,sizeof(*this))来初始化.而C++中,有时候也会用到struct,在利用memset进行初始化时,非常容易踩 ...
- （数据科学学习手札105）Python+Dash快速web应用开发——回调交互篇（中）
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...
- python基础（数据类型，while，if）
python基础初识. 1,运行python代码. 在d盘下创建一个t1.py文件内容是: print('hello world') 打开windows命令行输入cmd,确定后 写入代码python ...
- Linux内核poll/select机制简析
0 I/O多路复用机制 I/O多路复用 (I/O multiplexing),提供了同时监测若干个文件描述符是否可以执行IO操作的能力. select/poll/epoll 函数都提供了这样的机制,能 ...
- PowerBI系列组件关系详解
随着数据分析工具的不断更新,我们所熟知的Excel可能已经不是你想象中的样子了. Excel和Power BI又有何千丝万缕的联系? M语言和DAX语言又是什么样的存在? 操作他们又需要掌握什么样的技 ...
- 深度学习论文翻译解析（十八）：MobileNetV2: Inverted Residuals and Linear Bottlenecks
论文标题:MobileNetV2: Inverted Residuals and Linear Bottlenecks 论文作者:Mark Sandler Andrew Howard Menglong ...