Javascript webkitRequestFullscreen（）在android上更改chrome上网页的视口/尺寸

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

我知道我需要使用，这涉及调用

元素。webkitRequestFullscreen（）

因此，我在

document.body

上调用它，因为我希望所有内容都能进入全屏模式，并充分利用所有手机屏幕

---

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

要演示屏幕已放大并丢失了可绘制像素，请从检查我的手机的控制台中查看以下内容：

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

很明显，

innerWidth

和

innerHeight

在进入全屏时会减少一些，但我不知道是什么

---

我尝试过调整主体中包含的画布的大小，但没有效果

但我认为解决办法是添加一个：

我还尝试设置一个确定的内容宽度：

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

但是这两种方法似乎都没有对网页的行为产生任何影响，所以我不确定我是否把它们放错了（在

中），或者我的语法是否错了，但它们没有改变任何东西。

解决方案（更多的解决办法）是打开我的网站，我在手机上用Chrome打开的网站，进入一个渐进的网络应用程序

这非常简单，只要在根目录中编写一个简短的

manifest.json

文件，然后在Chrome中打开网站，点击“添加到主屏幕”

现在，

manifest.json

文件有一个选项：

display:fullscreen

这并没有降低工作空间的分辨率，只是我需要的修复

---

此外，考虑到我的虚拟现实体验目标，将其作为一个网络应用程序比作为一个在Chrome中大惊小怪的网站更有意义。

你解决了这个问题吗？@Nawal请看下面我的答案。谢谢@Joe Iddon，在我的情况下，通过全屏显示画布本身而不是html页面，我能够获得全屏画布而不需要进行不必要的缩放：document.getElementById（“myCanvas”）.requestFullscreen（）；

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