3

我正在尝试使 CraftyJS 场景大小为 100x100 像素，以便在 iOS 上的移动 Safari 中完全显示为 100x100 像素。

代码本质上是这样的：

function init() {
// Start crafty     
Crafty.init(100, 100);
Crafty.canvas.init();
Crafty.background('#eeeeee');
Crafty.e('2D, Canvas, Color').attr({x: 0, y: 0, w: 10, h: 10}).Color('black');
}

在桌面上它工作正常。在移动 Safari 上，它会调整为不同的大小。我试图摆弄视口元标记，但似乎 Crafty 有自己的设置。任何帮助或指向正确方向的指针表示赞赏。

4

2 回答 2

1

JS 代码看起来不错，您的视口设置应如下所示，以确保设备不会尝试缩放页面以适应：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
于 2012-08-29T15:25:48.270 回答
1

我相信我找到了原因 - 视网膜显示器（高 DPI）上的 Safari 将每个 CSS 像素解释为 2 个逻辑像素，因此图像大小加倍。有一个 webkit 设置可以改变这个，比如：

<link rel="stylesheet" type="text/css" href="/css/retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />

至于 Crafty 本身，我可能需要调整它的视口设置并将初始比例设置为 0.5 而不是视网膜显示器上的 1.0 来解决这个问题。

于 2012-08-30T21:06:46.507 回答