JS 全屏预览requestFullscreen结合

JS 全屏预览requestFullscreen结合getScreenDetails实现全屏

前遇到一个需要在浏览器全屏展示页面的效果,我们经常使用的就是requestFullscreen和exitFullscreen，来进行全屏或者退出全屏，但有时候我们可能需要获取打开全屏时的窗口权限信息，这种情况下就需要使用getScreenDetails了

代码如下

<div class="wrap">
    <div class="content">
      Setting Screen
    </div>
    <div class="btn">
      <button id="full-screen" onclick="fullScreen()">全屏</button>
      <button id="exit-full-screen" onclick="exitFullScreen()">退出全屏</button>
    </div>
  </div>
  <script>
     //获取全屏元素，可以是具体元素或者body
    const wrap=document.querySelector('.wrap')
    let primaryScreen=null
    async function fullScreen () {
      // 检测网页是否有全屏元素
      if(!document.fullscreenElement){
        console.log('/screen.html [43]--1','full-screen',document.fullscreenElement);
        try {
          if(!primaryScreen) {
            //获取可以全屏的窗口信息
            primaryScreen=(await getScreenDetails()).screens.find(
              (screen)=> screen.isPrimary,
            );
          }
          console.log('/screen.html [54]--1','primaryScreen',primaryScreen);
          //将窗口信息传给requestFullscreen,窗口将弹出确认弹框
          await wrap.requestFullscreen({ screen: primaryScreen });
        } catch (err) {
          console.error(err.name, err.message);
        }
      }
      

    }

    function exitFullScreen () {
      // 检测网页是否有全屏元素
      if(document.fullscreenElement) {
        // document 退出全屏
        document.exitFullscreen()
        console.log('/screen.html [43]--1','exit-full-screen',document.fullscreenElement);
      }
    }

如图所示，点击允许将获取同意全屏窗口的信息

PS:

全屏元素，可以是具体元素或者body
退出全屏只能是document
在进行全屏或退出全屏时，最好进行document.fullscreenElement全屏元素获取
getScreenDetails可以获取系统同意全屏的窗口信息

家好，我是大澈！

本文约 700+ 字，整篇阅读约需 1 分钟。

每日分享一段优质代码片段。

今天分享一段 CSS 代码片段，使用 CSS 设置网页全屏背景图片，很简单。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

html {
background: url('images/bg.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover; /* 适用于旧版 WebKit 浏览器 */
-moz-background-size: cover; /* 适用于旧版 Firefox 浏览器 */
-o-background-size: cover; /* 适用于旧版 Opera 浏览器 */
}

分享原因

这段代码展示了如何使用 CSS 设置网页全屏背景图片，使其在不同浏览器中都能完美适应屏幕尺寸。

这对于创建具有视觉吸引力且兼容性良好的网页非常重要。

代码解析

1. background: url('images/bg.jpg') no-repeat center center fixed;

background：简写属性，用于设置所有背景属性。

url('images/bg.jpg')：指定背景图像的路径。

no-repeat：背景图像不重复显示。

center center：背景图像在水平方向和垂直方向都居中显示。

fixed：背景图像固定在视口中，即使页面滚动，背景图像也不会移动。

2. background-size: cover;

background-size: cover：使背景图像按比例缩放，以完全覆盖背景区域。这意味着图像可能会被裁剪以适应容器。

3. 浏览器前缀的使用

-webkit-background-size：适用于旧版 WebKit 浏览器（如旧版 Safari 和 Chrome）。

-moz-background-size：适用于旧版 Firefox 浏览器。

-o-background-size：适用于旧版 Opera 浏览器。

这些浏览器前缀用于处理旧版浏览器的兼容性问题。虽然现代浏览器大多已经支持标准的 background-size 属性，但在代码中加入这些前缀可以确保在老旧浏览器中也能正常显示背景图片。

- end -

色大气全屏背景通用登录页面html模板是一款适用于PC端和手机端的登录界面模板、APP登录界面模板。现在就业非常重要的一个项目你准备好了吗？下午小编教你从无到有的敲代码敲出自己博客最重要的项目高薪就业轻松2倍。

项目源代码：

<!DOCTYPE html>
<html lang="en">
<head>
<title>蓝色登录界面HTML代码</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<!--图标样式-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
 
<!--布局框架-->
<link rel="stylesheet" type="text/css" href="css/util.css">
 
<!--主要样式-->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
 
<body>
 
 <div class="limiter">
 <div class="container-login100" style="background-image: url('images/img-01.jpg');">
 <div class="wrap-login100 p-t-190 p-b-30">
 <form class="login100-form validate-form">
 <div class="login100-form-avatar">
 <img src="images/avatar-01.jpg" alt="AVATAR">
 </div>
 
 <span class="login100-form-title p-t-20 p-b-45">Hello</span>
 
 <div class="wrap-input100 validate-input m-b-10" data-validate="请输入用户名">
 <input class="input100" type="text" name="username" placeholder="用户名" autocomplete="off">
 <span class="focus-input100"></span>
 <span class="symbol-input100">
 <i class="fa fa-user"></i>
 </span>
 </div>
 
 <div class="wrap-input100 validate-input m-b-10" data-validate="请输入密码">
 <input class="input100" type="password" name="pass" placeholder="密码">
 <span class="focus-input100"></span>
 <span class="symbol-input100">
 <i class="fa fa-lock"></i>
 </span>
 </div>
 
 <div class="container-login100-form-btn p-t-10">
 <button class="login100-form-btn">登 录</button>
 </div>
 
 <div class="text-center w-full p-t-25 p-b-230">
 <a href="#" class="txt1">忘记密码？</a>
 </div>
 
 <div class="text-center w-full">
 <a class="txt1" href="#">
 立即注册
 <i class="fa fa-long-arrow-right"></i>
 </a>
 </div>
 </form>
 </div>
 </div>
 </div>
 
 <script src="vendor/jquery/jquery-1.12.4.min.js"></script>
 <script src="js/main.js"></script>
 
</body>
</html>

代码运行效果截图

大家需要这个项目css代码，js，图片做练习的可以找我免费领取，如果大家不怕麻烦可以关注我后私信我“前端学习资料”几个字找我领取 24小时在线！

在线咨询

上一篇：九个实用的Word转PDF的方法，为你解决格式转换的
下一篇：css实现的简约风格登录页面html页面前端源码

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JS 全屏预览requestFullscreen结合

项目源代码：

代码运行效果截图

您的项目需求