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結合

項目源代碼：

代碼運行效果截圖

您的項目需求