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

私は原因を見つけたと思います.Retinaディスプレイ（高DPI）のSafariは、各CSSピクセルを2つの論理ピクセルとして解釈しているため、画像のサイズが2倍になっています。これを次のように変更できる Webkit 設定があります。

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

Crafty 自体については、この問題を解決するには、おそらくそのビューポート設定をいじって、Retina ディスプレイの初期スケールを 1.0 ではなく 0.5 に設定する必要があります。

于 2012-08-30T21:06:46.507 に答える
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 に答える