2

对于应用程序，我需要将 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全屏时会减少一些东西，但我不知道是什么。

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

但我认为解决方案是添加一个视口：

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

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

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

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

4

1 回答 1

1

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

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

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

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

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

于 2020-12-04T11:48:15.500 回答