webkitRequestFullscreen() 在 android 上的 chrome 上更改网页的视口/尺寸
[英]webkitRequestFullscreen() changing viewport / dimensions of webpage on chrome on android
问题描述
For an application, I need to send chrome on android into full-screen mode.
对于应用程序，我需要将 android 上的 chrome 发送到全屏模式。
I know that I need to use theFullscreen API , which involves calling Element.webkitRequestFullscreen() .我知道我需要使用Fullscreen API ，这涉及调用Element.webkitRequestFullscreen() 。
So, I call this on document.body as I want everything to be put into fullscreen mode and take advantage of all the phone screen.所以，我在document.body上调用它，因为我希望所有内容都进入全屏模式并利用所有手机屏幕。
However the problem is that the screen is resized/loses quality.然而，问题是屏幕被调整大小/质量下降。 This severely mucks up my application (which is drawing to a canvas for virtual reality) because I need all the resolution I can get!这严重破坏了我的应用程序（它正在为虚拟现实绘制画布），因为我需要我可以获得的所有分辨率！
To demonstrate the screen has been enlarged and lost drawable pixels, see this from the console of inspecting my phone:为了演示屏幕被放大并丢失了可绘制像素，请从检查我的手机的控制台中查看：
window.innerWidth
980
window.innerHeight
1547
//now I enter full screen...
window.innerWidth
360
window.innerHeight
640
Clearly, innerWidth and innerHeight are being reduced by something when entering fullscreen, but I can't figure out what.显然，进入全屏时， innerWidth和innerHeight被某些东西减少了，但我不知道是什么。
I have tried different resizing of the canvas which is contained in the body but to no avail.我尝试了不同的调整包含在主体中的画布的大小，但无济于事。
But what I thought would be the solution would be to add a viewport :但我认为解决方案是添加一个视口：
<meta name="viewport" content="width=device-width, initial-scale=1">
and I also tried setting a definitive content width:我还尝试设置明确的内容宽度：
<meta name="viewport" content="width=900, initial-scale=1">
but neither of these seemed to have any effect on the behaviour of the webpage, so I am not sure if I am placing them wrong (in the <head> ) or if I have the syntax wrong, but they don't change anything.但这些似乎都对网页的行为没有任何影响，所以我不确定我是否将它们放置错误（在<head> ）或者我的语法错误，但它们没有改变任何东西。
1 个解决方案
解决方案1
1 已采纳 2020-12-04 11:48:15
The solution (more of a workaround) was to turn my website, that I was opening in Chrome on my phone, into a Progressive Web App.解决方案（更像是一种解决方法）是将我在手机上在 Chrome 中打开的网站转变为渐进式 Web 应用程序。
This is as simple as writing a short manifest.json file in the root directory then once the website is open in Chrome, tapping on "Add to Home Screen".这就像在根目录中编写一个简短的manifest.json文件一样简单，然后在 Chrome 中打开网站后，点击“添加到主屏幕”。
Now the manifest.json file has an option: display: fullscreen .现在manifest.json文件有一个选项： display: fullscreen 。
This does not reduce the working space resolution and was just the fix I needed.这不会降低工作空间分辨率，只是我需要的修复。
Furthermore, considering my goal of a VR experience, it makes more sense for this to be a web app than a website that you have to fuss around with in Chrome.此外，考虑到我的 VR 体验目标，将它作为一个网络应用程序比一个你必须在 Chrome 中大惊小怪的网站更有意义。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.