javascript - 移动浏览器低分辨率视口(viewport)

Question

我遇到了一个奇怪的问题。我有一个占用一半可用屏幕空间的 DIV，而这个 DIV 只有一个 Canvas 图像(我即时生成的)。我使用 offsetWidth 和 offsetHeight 或 DIV 设置 Canvas 的大小。

var efisWidth = hudView.offsetWidth;
var efisHeight = hudView.offsetHeight;

我的网页根据这两个属性的宽度和高度绘制 Canvas 。它在 PC 上看起来很完美，因为生成的图像与屏幕分辨率的比例为 1:1。但是在移动设备上，图像不是全分辨率的，因为移动浏览器会告知此属性的分辨率低于实际屏幕分辨率。

我使用 iPhone 7 Plus(1080x1920 屏幕)，但 offsetWidth 通知 414 而不是 1080。因此，它以较低的分辨率呈现我的 Canvas ，浏览器只是将它拉伸(stretch)到实际屏幕分辨率，但结果是低分辨率图像。

如果我在视口(viewport)元标记上使用 initial-scale=0.5， Canvas 会像我期望的那样使用全分辨率渲染，但我不敢使用这个解决方法，因为我不知道不知道其他智能手机是否做与 iPhone 完全相同的事情(视口(viewport)是 iphone 实际屏幕分辨率的一半)。

问题是:当我需要在实际屏幕分辨率上渲染 Canvas 并希望避免移动浏览器生成较低分辨率的视口(viewport)时，最佳方法是什么？

Answer 1

好的，这个网站告诉了我需要知道的一切: iPhone Screens Demystified

排序:

• iPhone [6,7,8] Plus 的原始分辨率是 1242x2208，而不是 1080x1920!
• iPhone 屏幕分辨率实际上是 1080x1920!它每次都会降低从原始分辨率到适合实际屏幕分辨率的所有内容。
• Viewport 的 device-width 常量是 414“点”宽。这是原始分辨率宽度的 1242 像素的 1/3。
• 有一个属性可以准确说明视口(viewport)与 native 屏幕分辨率的比例:它是 window.devicePixelRatio。在 iPhone [6,7,8] Plus 上，此属性的值为 3，这意味着 native 屏幕分辨率是视口(viewport)分辨率的 3 倍。
• Safari 制作了这个“低分辨率”视口(viewport)，这样网站就可以知道屏幕很小并自行适应这个较低的分辨率。

My Canvas 是使用已知的可用屏幕空间渲染的，该屏幕空间宽 414 英寸，高约 450 英寸。然后我的例程使用它作为基数渲染此 Canvas 内的所有内容...结果是生成的图像具有屏幕原始分辨率的 1/3。

为了解决我的问题，我使用 this script 将视口(viewport)宽度设置为实际的原生宽度(即 1242)。 Safari 将使所有内容都适合其原始分辨率的屏幕。