h5全屏

有一个全屏api

 
通过调用这个api可以使网页全屏。但是只能是用户操作的回调里面执行才能生效。比如在点击事件中。直接调用该方法不会生效。
 
据说通过meta 可以设置浏览器全屏，但是我试了没有生效
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->

 

 
 
完整例子：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Full-screen</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      height: 100%;
    }
    .container {
      width: 100%;
      height: 100%;
      background: grey;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    :-webkit-full-screen .container {
      background: red;
    }
    .btn {
      width: 300px;
      height: 30px;
      font-size: 16px;
    }

  </style>
</head>
<body>
<div class="container">
  <button id="btn" class="btn">click</button>
</div>
<script>
  var button = document.getElementById('btn');
  // 进入全屏
  function launchFullScreen(element) {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  }
  // 退出全屏
  function exitFullScreen() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozExitFullScreen) {
      document.mozExitFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }

  button.onclick = function () {
    var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;// 判断是否全屏
    if (!isFullScreen) {
      launchFullScreen(button); // 整个页面全屏
      // launchFullScreen(document.getElementById("btn")); // 某个元素全屏
    }
    else {
      exitFullScreen();
    }
    var fullScreenElement = document.fullscreenEnabled || document.mozFullscreenElement || document.webkitFullscreenElement; // 当前处于全屏状态的元素 element.
    var fullScreenEnabled = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled; // 标记 fullScreen 当前是否可用.
    console.log(fullScreenElement);
    console.log(fullScreenEnabled)
  };

  document.addEventListener('fullscreenchange', function () {
    
  });
  document.addEventListener('webkitfullscreenchange', function () {
    
  });
  document.addEventListener('mozfullscreenchange', function () {
    
  });
  document.addEventListener('MSFullscreenChange', function () {
 
  });

</script>
</body>
</html>

　　

posted @ 2020-09-14 11:20  菜鸟木易  阅读(590)  评论(0)    收藏  举报