webkitRequestFullscreen() 在 android 上更改 chrome 上网页的视口/尺寸答案

【问题标题】：webkitRequestFullscreen() changing viewport / dimensions of webpage on chrome on androidwebkitRequestFullscreen() 在 android 上更改 chrome 上网页的视口/尺寸
【发布时间】：2018-09-10 03:31:14
【问题描述】：

对于应用程序，我需要将 android 上的 chrome 发送到全屏模式。

我知道我需要使用Fullscreen API，这涉及到调用Element.webkitRequestFullscreen()。

所以，我打电话给 document.body，因为我希望所有内容都进入全屏模式并充分利用手机屏幕。

但是问题是屏幕被调整大小/质量下降。这严重破坏了我的应用程序（正在为虚拟现实绘制画布），因为我需要我能得到的所有分辨率！

要证明屏幕已放大并丢失可绘制像素，请从检查我的手机的控制台中查看：

window.innerWidth
980
window.innerHeight
1547
//now I enter full screen...
window.innerWidth
360
window.innerHeight
640

很明显，innerWidth 和 innerHeight 在进入全屏时被缩小了，但我不知道是什么。

我尝试过调整包含在正文中的画布的不同大小，但无济于事。

但我认为解决方案是添加viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

我还尝试设置明确的内容宽度：

<meta name="viewport" content="width=900, initial-scale=1">

但这些似乎都没有任何对网页的行为产生影响，所以我不确定我是否把它们放错了（在 <head> 中）或者我是否有语法错了，但它们不会改变任何东西。

【问题讨论】：

你解决了吗？
@Nawal 在下面查看我的答案。
感谢@Joe Iddon，在我的例子中，我能够通过全屏画布本身而不是 html 页面来获得全屏画布而无需不必要的缩放：document.getElementById("myCanvas").requestFullscreen( );

标签： javascript android html5-canvas html5-fullscreen

【解决方案1】：

解决方案（更多的是一种解决方法）是将我在手机上的 Chrome 中打开的网站变成一个渐进式 Web 应用程序。

这就像在根目录中编写一个简短的 manifest.json 文件一样简单，然后在 Chrome 中打开网站后，点击“添加到主屏幕”。

现在manifest.json 文件有一个选项：display: fullscreen。

这不会降低工作空间的分辨率，只是我需要的修复。

此外，考虑到我的 VR 体验目标，将其作为一个 Web 应用程序比你必须在 Chrome 中大惊小怪的网站更有意义。

【讨论】：