gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 10:01:56 25 4
gpt4 key购买 nike

我正在尝试制作我的第一个应用程序,但似乎整个屏幕总是失焦。分辨率为(在 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" />

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

最佳答案

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

您应该使用上述尺寸来渲染任何 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

希望这有帮助。

关于javascript - 使用phonegap 和 Jquery/html Canvas 对窗口进行锐化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30555439/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com