Question

对于那些不知道的人，原生全屏是浏览器占用整个计算机屏幕的地方，就像在example中一样。我已经制作了一个运行的全屏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>

提前致谢！

Answer 1

这来自MDN: Using full screen mode

演示文稿差异

值得注意的是Gecko和WebKit之间的关键区别   此时的实现：Gecko会自动添加CSS规则   拉伸它以填充屏幕的元素：“宽度：100％;高度：   100％“。WebKit没有这样做;相反，它以全屏为中心   屏幕中相同大小的元素，否则为黑色。要得到   在WebKit中，您需要添加自己的全屏行为   “宽度：100％;高度：100％;” CSS自己对元素进行规则：
:-webkit-full-screen #myvideo {
  width: 100%;
  height: 100%;
}
另一方面，如果你试图模仿WebKit的行为 Gecko，你需要放置你想要出现的元素另一个元素，你将全屏，而使用CSS 调整内部元素以匹配所需外观的规则。

A working example on jsfiddle（edit）。大多数CSS都是为了使元素居中，改编自this SO answer，如果你不需要居中，你可以摆脱大部分CSS和两层div。

使Firefox的原生全屏看起来像Chrome

1 个答案:

演示文稿差异