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. Java 从Character和char的区别来学习自动拆箱装箱

    本文结构 1.Character和char 的区别: 2.自动拆箱装箱 1.Character和char 的区别: Character是类,char基本数据类型. 在java中有三个类负责对字符的操作 ...

  2. centos7+python+selenium+chrome

    1.安装chrome yum install google-chrome 2.安装chromedriver所有版本的下载地址:https://sites.google.com/a/chromium.o ...

  3. 算法总结篇---AC自动机

    目录 写在前面 算法流程 引例: 概述: Trie树的构建(第一步) 失配指针(第二步) 构建失配指针 字典树和字典图 多模式匹配 例题 写在前面 鸣谢: OiWiki 「笔记」AC 自动机---Lu ...

  4. luoguP4999 烦人的数学作业

    写在前面 这两天信息量有点大,需要好好消化一下,呼呼 \(f[i][j]\) 的转移式还是好理解的,但是对于其实际意义课上有点糊 求 \(ans_{1, x}\) 是感觉手动把数拆开看会好理解一点?? ...

  5. JVM详解总结

    JVM详解总结 1.JVM内存模型 1.1 运行时数据区内存分布实例 1.2 类加载的生命周期 2.物理内存与虚拟内存 3.Java中需要使用内存的组件 3.1 Java堆 3.2 线程 3.3 类和 ...

  6. Python遍历目录下xlsx文件

    对指定目录下的指定类型文件进行遍历,可对文件名关键字进行条件筛选 返回值为文件地址的列表 import os # 定义一个函数,函数名字为get_all_excel,需要传入一个目录 def get_ ...

  7. 5.2 spring5源码--spring AOP源码分析二--切面的配置方式

    目标: 1. 什么是AOP, 什么是AspectJ 2. 什么是Spring AOP 3. Spring AOP注解版实现原理 4. Spring AOP切面原理解析 一. 认识AOP及其使用 详见博 ...

  8. Jenkins（3）拉取git仓库代码，执行python自动化脚本

    前言 python自动化的脚本开发完成后需提交到git代码仓库,接下来就是用Jenkins拉取代码去构建自动化代码了 新建项目 打开Jenkins新建一个自由风格的项目 源码管理 Repository ...

  9. springBoot之 spring-boot-starter-parent 引入详解

    springBoot中引入 <parent> <groupId>org.springframework.boot</groupId> <artifactId& ...

  10. Web程序设计基础期末大作业——模仿QQ飞车手游S联赛官网编写的网页

    QQ飞车手游是我非常喜欢的游戏,也是我现在为数不多的常在玩的游戏,刚好我Web程序设计基础的大作业是要做一套网站,我就借此机会模仿飞车S联赛官网的页面自己做了一个网页,又加了一些自己的元素,由于我做这 ...