gpt4 book ai didi

javascript - 让 Firefox 的原生全屏看起来像 Chrome 的

转载 作者:行者123 更新时间:2023-11-28 12:18:22 25 4
gpt4 key购买 nike

对于那些不知道的人, native 全屏是浏览器占据整个计算机屏幕的地方,就像这个 example .我制作了一个可以运行的全屏 JavaScript 应用程序,但默认情况下,Chrome 和 Firefox 打开 native 全屏的方式不同。Firefox 拉伸(stretch)对象使其占据整个屏幕(高度 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>

提前致谢!

最佳答案

这是来自 MDN: Using full screen mode

Presentation differences

It's worth noting a key difference here between the Gecko and WebKitimplementations at this time: Gecko automatically adds CSS rules tothe element to stretch it to fill the screen: "width: 100%; height:100%". WebKit doesn't do this; instead, it centers the fullscreenelement at the same size in a screen that's otherwise black. To getthe same fullscreen behavior in WebKit, you need to add your own"width: 100%; height: 100%;" CSS rules to the element yourself:

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

On the other hand, if you're trying to emulate WebKit's behavior onGecko, you need to place the element you want to present insideanother element, which you'll make fullscreen instead, and use CSSrules to adjust the inner element to match the appearance you want.

A working example on jsfiddle (edit)。大部分 CSS 用于使元素居中,改编自 this SO answer ,如果不需要居中,可以去掉大部分 CSS 和两层 div。

关于javascript - 让 Firefox 的原生全屏看起来像 Chrome 的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17937104/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com