Javascript 制作Firefox'；s的原生全屏看起来像Chrome'；s_Javascript_Css_Fullscreen_Native

Javascript 制作Firefox'；s的原生全屏看起来像Chrome'；s

javascript css

Javascript 制作Firefox'；s的原生全屏看起来像Chrome'；s,javascript,css,fullscreen,native,Javascript,Css,Fullscreen,Native,对于那些不知道的人来说，原生全屏是浏览器占据整个计算机屏幕的地方，如图所示。我制作了一个运行的全屏JavaScript应用程序，但默认情况下，Chrome和Firefox以不同的方式打开到本机全屏。 Firefox拉伸对象，使其占据整个屏幕（高度100%，宽度100%），而Chrome则将对象以其自然比例置于黑色背景前我希望Firefox像Chrome上的全屏一样。我觉得这是解决了一个简单的CSS的变化，但我不知道所有的CSS很好这就是我迄今为止所尝试的： <!DOCTYPE html

对于那些不知道的人来说，原生全屏是浏览器占据整个计算机屏幕的地方，如图所示。我制作了一个运行的全屏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>


.fsElement:-webkit全屏{
//这是Chrome全屏页面的CSS
}
.fsElement:-moz全屏{
//这是Firefox全屏页面的CSS
}
功能全屏（id）{
//获取我们想要进入全屏模式的元素
var元素=document.getElementById（id）；
//这些功能在不支持全屏模式的浏览器中不存在，
//所以在给他们打电话之前，我们必须检查一下他们是否有空。
if（element.mozRequestFullScreen）{
//这就是如何在Firefox中进入fullscren模式
元素。mozRequestFullScreen（）；
}else if（element.webkitRequestFullScreen）{
//这就是如何在Chrome和Safari中进入全屏模式
//这两种浏览器都基于Webkit项目，因此前缀相同。
元素。webkitRequestFullScreen（）；
}
//万岁，现在我们进入全屏模式！
}


点击我去全屏！

提前谢谢

这是从

呈现差异值得注意的是Gecko和WebKit之间的一个关键区别此时的实现：Gecko自动将CSS规则添加到要拉伸它以填充屏幕的元素：“宽度：100%；高度： 100%". WebKit不会这样做；相反，它将全屏居中屏幕中相同大小的元素，否则为黑色。得到与WebKit中的全屏行为相同，您需要添加自己的 “宽度：100%；高度：100%；”CSS对元素本身的规则：

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

另一方面，如果您试图在 Gecko，你需要把你想展示的元素放进去另一个元素，您将改为全屏显示，并使用CSS 调整内部元素以匹配所需外观的规则。

（）。大多数CSS用于将元素居中，改编自，如果不需要居中，您可以去掉大部分CSS和两层div。

请发布一个或更好，在此处发布直接相关的代码。@Lie Ryan和Andrew Barber:我制作了一个JFIDLE，但它不支持全屏。我知道上面的代码是有效的，因为我在Chrome和Firefox中都进行了测试。我本来打算把代码按照语言进行拆分，以使代码更清晰，但我认为这会更有帮助，因为他们现在可以很容易地在自己的计算机上制作一个工作示例。好点了吗？很有效，谢谢！这是解决这个问题的一个非常有创意的办法