javascript - 如何处理 Windows Phone 8 HTML5 + JavaScript 游戏的分辨率?

标签 javascript jquery html canvas windows-phone-8

我正在使用 HTML5 canvas 标签和 JavaScript 制作我的第一个手机游戏。我目前使用的唯一外部库是 jQuery。

当我将游戏加载到分辨率为 1280 x 768 的手机 (Lumia 920) 时, Canvas (具有相同分辨率)的高度和宽度是原来的两倍。我听说手机通常不使用最大分辨率,而是使用一半或类似的分辨率,这样就会显示此内容。

那么如何确保游戏支持所有(我认为是 4 个)可用的分辨率?您是否可以将 Canvas 设置为 100% 宽和高,WP8 是否有某种自动调整大小的方法,通常是否需要针对不同分辨率使用不同的图像以确保高质量?

最佳答案

CSS 像素与设备像素不同。

最好的例子是 ipad 和 ipad retina。

即使 ipad 的分辨率为 768 * 1024,但 ipad Retina 的分辨率为 1536 * 2048,ipad 中宽度为 300 像素的 Canvas 在物理上与 Ipad 视网膜中的尺寸相同。

这是因为两个设备的 CSS PIXEL 宽度相同。唯一改变的是密度比,视网膜设备为 2。

同样的情况也适用于您的 LUMIA 920 设备。 另外,如果您想确定 CSS 像素大小,请将屏幕分辨率除以密度

1536/2 = 768

关于javascript - 如何处理 Windows Phone 8 HTML5 + JavaScript 游戏的分辨率?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23681865/

相关文章:

javascript - 简单的 CSS 梯度检测

javascript - Jquery 数组与图像的迭代

jquery - onclick ="func()"或 .click()?

javascript - 播放媒体的 AudioContext 平移音频

html - Bootstrap 适合子内容并让其他子内容滚动

html - 包裹在容器中的流体 float 元件

javascript - array.push(element) 与 array[array.length] = element

javascript - 在ajax请求中加密密码并在laravel Controller 中解密(.php)

javascript - JQuery 表单验证禁用整个 JQuery 代码

javascript - 视口(viewport) JQuery - 如果元素在视口(viewport)中,则将文档准备好