移动浏览器低分辨率视口
Mobile browsers low resolution viewport
我遇到了一个奇怪的问题。我有一个 DIV 占据可用屏幕 space 的一半，而这个 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，并且浏览器只是将其拉伸到实际屏幕分辨率，但结果是低分辨率图像。
如果我在视口元标记上使用 initial-scale=0.5，canvas 会像我期望的那样使用全分辨率呈现，但我不敢使用此解决方法，因为我没有知道其他智能手机是否做与 iPhone 完全相同的事情（视口是 iphone 上实际屏幕分辨率的一半）。
问题是：当我需要在实际屏幕分辨率上渲染 canvas 并希望避免移动浏览器制作较低分辨率的视口时，最好的方法是什么？
好的，这个网站告诉了我需要知道的一切：
iPhone Screens Demystified
排序：
- iPhone [6,7,8]加上原始分辨率是 1242x2208，不是 1080x1920！
- iPhone 屏幕分辨率居然是1080x1920！它每次都会对从原始分辨率到适合实际屏幕分辨率的所有内容进行下采样。
- 视口的
device-width 常量为 414 "points" 宽。这是原始分辨率宽度的 1242 像素的 1/3。
- Safari 制作此 "low resolution" 视口，以便网站可以知道屏幕很小并自行适应这种较低的分辨率。
我的 Canvas 是使用通知的可用屏幕 space 呈现的，该屏幕宽 414，高约 450。然后我的例程使用它作为基数渲染此 canvas 中的所有内容...结果是生成的图像具有屏幕原始分辨率的 1/3。
为了解决我的问题，我使用 this script 将视口宽度设置为实际的原始宽度（即 1242）。 Safari 将使所有内容都适合其原始分辨率的屏幕。
我遇到了一个奇怪的问题。我有一个 DIV 占据可用屏幕 space 的一半，而这个 DIV 只有一个 Canvas 图像（我即时生成的）。我使用 offsetWidth 和 offsetHeight 或 DIV.
var efisWidth = hudView.offsetWidth;
var efisHeight = hudView.offsetHeight;
我的网页根据这两个属性绘制 canvas 考虑宽度和高度。它在 PC 上看起来很完美，因为生成的图像是屏幕分辨率的 1:1。但是在移动设备上，图像不是全分辨率的，因为移动浏览器会告知此属性的分辨率低于实际屏幕分辨率。
我使用 iPhone 7 Plus（1080x1920 屏幕）但是 offsetWidth 通知 414 而不是 1080。因此，它以较低的分辨率呈现我的 canvas，并且浏览器只是将其拉伸到实际屏幕分辨率，但结果是低分辨率图像。
如果我在视口元标记上使用 initial-scale=0.5，canvas 会像我期望的那样使用全分辨率呈现，但我不敢使用此解决方法，因为我没有知道其他智能手机是否做与 iPhone 完全相同的事情（视口是 iphone 上实际屏幕分辨率的一半）。
问题是：当我需要在实际屏幕分辨率上渲染 canvas 并希望避免移动浏览器制作较低分辨率的视口时，最好的方法是什么？
好的，这个网站告诉了我需要知道的一切： iPhone Screens Demystified
排序：
- iPhone [6,7,8]加上原始分辨率是 1242x2208，不是 1080x1920！
- iPhone 屏幕分辨率居然是1080x1920！它每次都会对从原始分辨率到适合实际屏幕分辨率的所有内容进行下采样。
- 视口的
device-width常量为 414 "points" 宽。这是原始分辨率宽度的 1242 像素的 1/3。 - Safari 制作此 "low resolution" 视口，以便网站可以知道屏幕很小并自行适应这种较低的分辨率。
我的 Canvas 是使用通知的可用屏幕 space 呈现的，该屏幕宽 414，高约 450。然后我的例程使用它作为基数渲染此 canvas 中的所有内容...结果是生成的图像具有屏幕原始分辨率的 1/3。
为了解决我的问题，我使用 this script 将视口宽度设置为实际的原始宽度（即 1242）。 Safari 将使所有内容都适合其原始分辨率的屏幕。