2

对于那些不知道的人，本机全屏是您的浏览器占据整个计算机屏幕的地方，就像在这个例子中一样。我制作了一个可以运行的全屏 JavaScript 应用程序，但默认情况下，Chrome 和 Firefox 以不同的方式打开本机全屏。Firefox 会拉伸对象，使其占据整个屏幕（高度 100%，宽度 100%），而 Chrome 会将对象放在具有自然比例的黑色背景前。

我希望 Firefox 在 Chrome 上表现得像全屏。我觉得这可以通过简单的 CSS 更改来解决，但我不太了解 CSS。

这是我迄今为止尝试过的：

<!DOCTYPE html>
<html>
<head>
<style>
  .fsElement:-webkit-full-screen {
      //this is the CSS for Chrome's fullscreen page
  }
  .fsElement:-moz-full-screen {
      //this is the CSS for Firefox's fullscreen page
  }
</style>
</head>
<body>

<script type="text/javascript">
  function goFullscreen(id) {
      // Get the element that we want to take into fullscreen mode
      var element = document.getElementById(id);

      // These function will not exist in the browsers that don't support fullscreen mode yet, 
      // so we'll have to check to see if they're available before calling them.

      if (element.mozRequestFullScreen) {
          // This is how to go into fullscren mode in Firefox
          element.mozRequestFullScreen();
      } else if (element.webkitRequestFullScreen) {
          // This is how to go into fullscreen mode in Chrome and Safari
          // Both of those browsers are based on the Webkit project, hence the same prefix.
          element.webkitRequestFullScreen();
      }
      // Hooray, now we're in fullscreen mode!
  }
</script>

<img class="fsElement" height="375" width="500" src="http://s3.amazonaws.com/rapgenius/filepicker%2FvCleswcKTpuRXKptjOPo_kitten.jpg" id="kittenPic"></img>
<br />
<button onclick="goFullscreen('kittenPic'); return false">Click Me To Go Fullscreen!</button>

</body>
</html>

提前致谢！

4

1 回答 1

1

这来自MDN：使用全屏模式

呈现差异

值得注意的是此时 Gecko 和 WebKit 实现之间的一个关键区别：Gecko 自动将 CSS 规则添加到元素以将其拉伸以填充屏幕：“宽度：100%；高度：100%”。WebKit 不这样做；取而代之的是，它将全屏元素以相同大小集中在一个原本为黑色的屏幕中。要在 WebKit 中获得相同的全屏行为，您需要添加自己的“宽度：100%；高度：100%；” 元素自己的 CSS 规则：

:-webkit-full-screen #myvideo {
  width: 100%;
  height: 100%;
}

另一方面，如果你试图在 Gecko 上模拟 WebKit 的行为，你需要将你想要呈现的元素放在另一个元素中，你将改为全屏，并使用 CSS 规则来调整内部元素以匹配你想要的外观。

关于 jsfiddle (编辑) 的工作示例。大多数 CSS 用于使元素居中，改编自这个 SO answer，如果您不需要居中，您可以去掉大部分 CSS 和两层 div 。

于 2013-07-31T04:36:03.253 回答