时间戳

首页 > 解决方案 > 移动浏览器低分辨率视口

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

问题描述

我面临一个奇怪的问题。我有一个 DIV，它占用了可用屏幕空间的一半，而这个 DIV 只有一个 Canvas 图像（我即时生成）。offsetWidth我使用andoffsetHeight或 DIV设置画布的大小。

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

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

我使用 iPhone 7 Plus（1080x1920 屏幕），但offsetWidth通知 414 而不是 1080。因此，它以较低的分辨率渲染我的画布，浏览器只是将其拉伸到实际的屏幕分辨率，但结果是低分辨率图像.

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

较低分辨率视口的示例使生成的图像质量差

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

标签： javascripthtmlcsscanvasviewport

解决方案

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

排序：

  • iPhone [6,7,8] Plus 原生分辨率是 1242x2208，而不是 1080x1920！
  • iPhone屏幕分辨率居然是1080x1920！它每次都会对原始分辨率的所有内容进行下采样以适应实际的屏幕分辨率。
  • 视口的device-width常数是 414“点”宽。这是原始分辨率宽度的 1242 像素的 1/3。
  • Safari 制作了这种“低分辨率”视口，因此网站可以知道屏幕很小并自行适应这种较低的分辨率。

我的画布是使用通知的可用屏幕空间渲染的，它有 414 宽和约 450 高。然后我的例程使用这个作为基数来渲染这个画布内的所有内容......结果是生成的图像具有屏幕原始分辨率的 1/3。

为了解决我的问题，我使用此脚本将视口宽度设置为真正的原生宽度（即 1242）。Safari 会以其原始分辨率使所有内容都适合屏幕。

推荐阅读