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&copy; 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的更多相关文章

  1. 全屏显示网页FULLSCREEN API

    第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性 ...

  2. Fullscreen API与DOM监听API

    前言 以下几个API,在web开发中可以简化我们一部分交互操作. Fullscreen API 有时候我们想要全屏预览的效果,比如类似于图片预览.幻灯片播放等.全屏API是一个很好的选择. 基本用法 ...

  3. 封装Html5 Fullscreen API

    复制前言: 使用新的全屏 API,可以将用户的注意力导向特定元素,同时隐藏背景或转移对其他应用的注意力.因为W3C全屏规范还未达到最终版本,所以大多数浏览器供应商都使用唯一标识符为 API 添加前缀. ...

  4. HTML5全屏(Fullscreen)API详细介绍

    // 整个页面 onclick=   launchFullScreen(document.documentElement); // 某个元素 launchFullScreen(document.get ...

  5. Fullscreen API 全屏显示网页

    可参考文档:http://blog.csdn.net/tywali/article/details/8623938 脚本代码 <script type="text/javascript ...

  6. Fullscreen API：全屏操作

    function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } ...

  7. Native Fullscreen JavaScript API (plus jQuery plugin)

    http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ HTML5 <video> is gre ...

  8. html5常用API之Full Screen

    所谓Full Screen API,就是全屏API,在html5中,该API允许开发者以编程方式将Web应用程序全屏运行,使Web应用程序更像本地应用程序.这款API十分简单有用,是html5初学者必 ...

  9. 另5个你不知道的HTML5接口API

    原文地址: 5 More HTML5 APIs You Didn’t Know Existed 演示地址: 全屏API Demo 原文日期: 2012年11月08日 翻译日期: 2013年08月13日 ...

随机推荐

  1. 基于Python的接口自动化-unittest测试框架和ddt数据驱动

    引言 在编写接口自动化用例时,我们一般针对一个接口建立一个.py文件,一条接口测试用例封装为一个函数(方法),但是在批量执行的过程中,如果其中一条出错,后面的用例就无法执行,还有在运行大量的接口测试用 ...

  2. 解决Spirng注入时名称下的红色波浪线

    解决Spirng注入时名称下的红色波浪线 报错情形: 解决办法: 方案一: 如果可以正常运行,那么可能是类没有交给Spring管理,如下图,我们只需要在对应的接口(或者类上)加上@Component注 ...

  3. Bitter ORM NETCORE ORM 全网最粗暴简单易用高性能的 NETCore ORM 开源了

    开源的来了,懒人程序员的福音,.NET 生态闭环太缺开源精神了, 拥抱开源! 前言: 本人不是不喜欢现有ORM的轮子,而是发现现有的ORM 的都不太符合开发人员的一些习惯.现有的ORM 要么功能太冗余 ...

  4. 那些我们不知道的 Python 免费学习资料

    作者:小R编辑:AI 兔兔 Python 语言因为其易学,以及强大的功能,是很多刚开始学习编程的入门语言的选择之一. Python 语言被列入中小学教材后引起了越来越多人的关注. 希望孩子学习编程的家 ...

  5. sh 脚本名字和./脚本名字有什么区别

    sh xxx用 sh 这个shell (sh一般指系统默认shell,比如 bash, ksh, Csh 等都有可能) 来解释和运行 xxx 这个脚本.xxx 文件不必具有可执行属性(chmod +x ...

  6. POJ - 1226 Substrings (后缀数组)

    传送门:POJ - 1226 这个题跟POJ - 3294  和POJ - 3450 都是一样的思路,一种题型. POJ - 3294的题解可以见:https://www.cnblogs.com/li ...

  7. Codeforces 102394I Interesting Permutation 思维

    题意: 你有一个长度为n的序列a(这个序列只能使用[1,n]区间内的数字,每个数字只能使用一次),通过a序列可以构造出来三个相同长度的序列f.g.h For each 1≤i≤n, fi=max{a1 ...

  8. hdu3565 Bi-peak Number (有上界和下界的数位dp)

    Problem Description A peak number is defined as continuous digits {D0, D1 - Dn-1} (D0 > 0 and n & ...

  9. Codeforces Round #678 (Div. 2) C. Binary Search (二分,组合数)

    题意:有长度\(n\)的序列,让你构造序列,使得二分查找能在\(pos\)位置找到值\(x\).问最多能构造出多少种排列? 题解:题目给出的\(pos\)是固定的,所以我们可以根据图中所给的代码来进行 ...

  10. 2015ACM/ICPC亚洲区沈阳站-重现赛 M - Meeting (特殊建边,最短路)

    题意:有\(n\)个点,\(m\)个集合,集合\(E_i\)中的点都与集合中的其它点有一条边权为\(t_i\)的边,现在问第\(1\)个点和第\(n\)个点到某个点的路径最短,输出最短路径和目标点,如 ...