iOS设备上CraftyJS的场景大小

Scene size with CraftyJS on iOS device

本文关键字：CraftyJS iOS      更新时间：2023-09-26

我正在尝试制作一个100x100像素的CraftyJS场景，以便在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有自己的设置。感谢任何帮助或指向正确方向的指示。

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

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

我相信我找到了原因-视网膜显示器上的Safari（高DPI）将每个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来解决这个问题。

相关文章：