javascript - 使用phonegap 和 Jquery/html Canvas 对窗口进行锐化

Question

我正在尝试制作我的第一个应用程序，但似乎整个屏幕总是失焦。分辨率为(在 Iphone 6+ 上)1080x1920。当我创建一个大小为 $(window).innerWidth x $(window).innerHeight 的对象时，该对象最终会变成 320x568 之类的东西？我有一些标准元标记可能不起作用。

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

知道如何解决这个问题吗？

Answer 1

这很简单。您使用的是 window.innerWidth，它始终返回 CSS 像素(也称为与设备无关的像素)。在 iPhone 3、4、5 上，它将返回 320px，在 iPhone 6 和 6+ 上，它将分别返回 375px 和 414px。除非 iPhone 用户启用了称为“显示缩放”的辅助功能。那么 iPhone 6 和 6+ 的分辨率分别为 320px 和 375px。

您应该使用上述尺寸来渲染任何 HTML 并使用 CSS。例如。你想要一个全屏宽的DIV吗？将width设置为320px(当然，你也可以将其设置为100%)。

但是，如果您要渲染图像(包括 Canvas)，则应该以 native 设备分辨率提供它们。如果您想要非模糊的全屏宽IMG，请将width设置为100%或320px，但是将 SRC 指向 iPhone 4&5 上至少640px宽的图像。 iPhone 6+ 上的全 Angular 非模糊图像必须至少为 414*3 = 1242px。

但有一个坏消息。您的 1242 像素图像将以表面值拍摄，然后缩小 1.15 至 1080 像素，使其像素不完美。提供 1080px 图像不会有帮助，因为在操作系统/浏览器引擎的不同渲染阶段，它将放大到 1242px，然后缩小到 1080px。好消息是，对于这些巨大的决议来说，这两种方式都不重要。您将看不到它。

因此，如果您要渲染全 Angular canvas，请不要使用 innerWidth 中的 CSS 像素计数。通过将 window.innerWidth 乘以 window.devicePixelRatio 来使用 native 像素计数。它在我的 MBPr 和 iPhone 6 上返回“2”，在 iPhone 6+ 上返回 3。

希望这有帮助。