js-utils - fullscreen - 全屏

预览

 blog

intro

指定dom全屏，非整个页面全屏

效果

博客园代码块

不兼容ie

只是在页面窗口全屏，浏览器导航仍然显示

webkitRequestFullScreen

不兼容ie

显示器全屏，浏览器导航不显示

webkitRequestFullScreen

notice

不兼容ie

代码

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>全屏 | :fullscreen</title>
  </head>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    body > div {
      background-color: #f5f5f5;
    }
    #fullscreen:-webkit-full-screen {
      position: fixed;
      width: 100vw;
      height: 100vh;
      /* text-align: center; */
    }
    img {
      /* width: 600px; */
      vertical-align: bottom;
    }
 
    /* 全屏状态设置图片宽度 */
    #fullscreen:-webkit-full-screen img {
    }
 
    #fullscreen:-webkit-full-screen:-webkit-backdrop {
      /* background: maroon; */
    }
    #fullscreen:-ms-fullscreen:backdrop {
      /* background: maroon; */
    }
  </style>
  <body>
    <div id="fullscreen">
      <img
        src="https://pic.cnblogs.com/face/2237537/20210621132254.png"
        alt=""
      />
      <a href="https://cloud.tencent.com/developer/section/1072075">腾讯云</a>
      <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API"
        >MDN</a
      >
      <button onclick="fullScreen('fullscreen')">fullscreen</button>
    </div>
    <div id="fullscreen1">
      <img
        src="https://pic.cnblogs.com/face/2237537/20210621132254.png"
        alt=""
      />
      <pre>
            function fullScreen(id) {
                // 不支持ie
                if (document.webkitIsFullScreen) {
                  document.webkitExitFullscreen();
                } else {
                  document.getElementById(id).webkitRequestFullScreen();
                }
              }
        </pre
      >
      <button onclick="fullScreen('fullscreen1')">fullscreen1</button>
    </div>
    <script>
      function fullScreen(id) {
        // 不支持ie
        if (document.webkitIsFullScreen) {
          document.webkitExitFullscreen();
        } else {
          document.getElementById(id).webkitRequestFullScreen();
        }
      }
    </script>
  </body>
</html>

posted @ 2022-01-07 10:08 zc-lee 阅读(143) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

公告

zc-lee.github.io

昵称： zc-lee
园龄： 6年1个月
粉丝： 199861
关注： 8865

+加关注

2025年3月

日

一

二

三

四

五

六

zc-lee

lee1384@163.com

js-utils - fullscreen - 全屏

js-utils - fullscreen - 全屏

intro

效果

博客园代码块

webkitRequestFullScreen

webkitRequestFullScreen

notice

代码

公告

搜索

常用链接

最新随笔

积分与排名

随笔分类 (391)

随笔档案 (253)

文章分类 (16)

文章档案 (19)

lee

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>全屏 \| :fullscreen</title>
	</head>
	<style>
	body {
	margin: 0;
	padding: 0;
	}
	body > div {
	background-color: #f5f5f5;
	}
	#fullscreen:-webkit-full-screen {
	position: fixed;
	width: 100vw;
	height: 100vh;
	/* text-align: center; */
	}
	img {
	/* width: 600px; */
	vertical-align: bottom;
	}

	/* 全屏状态设置图片宽度 */
	#fullscreen:-webkit-full-screen img {
	}

	#fullscreen:-webkit-full-screen:-webkit-backdrop {
	/* background: maroon; */
	}
	#fullscreen:-ms-fullscreen:backdrop {
	/* background: maroon; */
	}
	</style>
	<body>
	<div id="fullscreen">
	<img
	src="https://pic.cnblogs.com/face/2237537/20210621132254.png"
	alt=""
	/>
	<a href="https://cloud.tencent.com/developer/section/1072075">腾讯云</a>
	<a href="https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API"
	>MDN</a
	>
	<button onclick="fullScreen('fullscreen')">fullscreen</button>
	</div>
	<div id="fullscreen1">
	<img
	src="https://pic.cnblogs.com/face/2237537/20210621132254.png"
	alt=""
	/>
	<pre>
	function fullScreen(id) {
	// 不支持ie
	if (document.webkitIsFullScreen) {
	document.webkitExitFullscreen();
	} else {
	document.getElementById(id).webkitRequestFullScreen();
	}
	}
	</pre
	>
	<button onclick="fullScreen('fullscreen1')">fullscreen1</button>
	</div>
	<script>
	function fullScreen(id) {
	// 不支持ie
	if (document.webkitIsFullScreen) {
	document.webkitExitFullscreen();
	} else {
	document.getElementById(id).webkitRequestFullScreen();
	}
	}
	</script>
	</body>
	</html>