本文详解如何利用JavaScript调用HTML5全屏API，针对Gecko与WebKit内核的差异进行兼容处理。重点解析requestFullscreen系列方法的使用，以及解决WebKit全屏后元素尺寸未自动拉伸的问题，通过CSS强制宽高100%实现统一的全屏视觉效果。
HTML5全屏API基础与浏览器前缀差异
若需将指定元素（例如视频标签）置于全屏模式展示，可调用该元素的 requestFullscreen() 方法。需注意不同浏览器内核的实现差异：Gecko内核对应的方法为 element.mozRequestFullScreen()，而WebKit内核则使用 element.webkitRequestFullscreen()。
以下是一个具体的应用示例：
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
elem.requestFullscreen(); //IE浏览器
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen(); //火狐浏览器
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen(); //谷歌浏览器
}在此阶段，Gecko与WebKit内核展现出显著差异：Gecko会自动为全屏元素注入CSS样式，使其宽度与高度均设为100%以铺满屏幕；WebKit则保持元素原始尺寸并居中显示，四周留黑。为使WebKit环境下达到与Gecko一致的全屏效果，必须手动为元素添加CSS规则，强制设置其宽度与高度均为100%。
全屏切换逻辑与退出机制实现
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}代码逻辑首先检测 document 对象的 fullscreenElement 属性（同时检查带有 -moz- 和 -webkit- 前缀的对应属性）。若该属性值为 null，表明当前处于窗口模式，需切换至全屏状态。此时应调用 element.mozRequestFullScreen() 或 webkitRequestFullscreen()，具体调用哪个方法取决于当前浏览器所支持的功能。
若全屏模式已激活（即 fullscreenElement 属性非空），则需调用 document.mozCancelFullScreen() 或 webkitCancelFullScreen() 退出全屏，具体方法的选择同样依赖于当前浏览器的类型。
以上即为关于JavaScript控制HTML5全屏模式及浏览器兼容问题的完整解析。