Javascript 移动浏览器低分辨率视口

我正面临一个奇怪的问题。我有一个DIV占用了一半的可用屏幕空间，这个DIV只有一个画布图像（我动态生成）。我使用

offsetWidth

和

offsetHeight

或DIV设置画布的大小

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

我的网页绘制画布时考虑了这两个属性的宽度和高度。它在PC上看起来非常完美，因为生成的图像与屏幕分辨率是1:1。但在移动设备上，图像的分辨率不是全分辨率，因为移动浏览器显示此属性的分辨率低于实际屏幕分辨率

我使用的是iPhone7 Plus（1080x1920屏幕），但是

offsetWidth

通知414而不是1080。因此，它以较低的分辨率渲染画布，浏览器只是将其拉伸到实际屏幕分辨率，但结果是生成低分辨率图像

如果我在viewport上使用meta标记a

initial scale=0.5

，画布会像我预期的那样使用其全分辨率进行渲染，但我害怕使用这种解决方法，因为我不知道其他智能手机是否会做与iPhone完全相同的事情（viewport是iPhone上实际屏幕分辨率的一半）

---

问题是：当我需要以实际屏幕分辨率渲染画布，并且希望避免移动浏览器生成低分辨率视口时，最好的方法是什么？

好的，这个网站告诉了我需要知道的一切：

分类：

• iPhone[6,7,8]Plus的本机分辨率是1242x2208，而不是1080x1920
• iPhone的屏幕分辨率实际上是1080x1920！它每次都会从本机分辨率到实际屏幕分辨率对所有内容进行采样
• 视口的

  设备宽度

  常数为414“点”宽。这是本机分辨率宽度1242像素的1/3
• Safari制作了这个“低分辨率”视口，这样网站就可以知道屏幕很小，并适应这种低分辨率

我的画布使用已知的可用屏幕空间进行渲染，屏幕空间为414宽~450高。然后我的例程用这个作为基数渲染画布中的所有内容。。。其结果是生成的图像具有屏幕本机分辨率的1/3

---

为了解决我的问题，我将视口宽度设置为真实的本地宽度（1242）。Safari将以其本机分辨率在屏幕上显示所有内容。

您的文档中包含了吗？是的，@Turnip。