iOS 기기의 CraftyJS가 포함 된 장면 크기

Question

iOS의 모바일 Safari에서 CraftyJS 장면 크기를 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가 자체 설정을 가지고있는 것처럼 보입니다. 오른쪽 방향으로 어떤 도움이나 포인터가 감사합니다.

Answer 1

을 나는 원인을 찾을 생각 - 사파리 망막 디스플레이에를 (높은 DPI)는 각 CSS 픽셀을 2 개의 논리 픽셀로 해석하므로 이미지 크기가 두 배가됩니다.

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

은 교활 자체에 관해서는, 나는 아마 뷰포트 설정으로 바이올린이 문제를 해결하기 위해 망막 디스플레이에 0.5 대신 1.0 초기 규모를 설정해야합니다 같은이 뭔가를 변경할 수 있습니다 웹킷 설정이 있습니다.

Answer 2

JS 코드가 잘 보이는

에 맞도록 페이지 크기를 조정하지 않는 장치를 확인하기 위해 다음과 같이 뷰포트 설정은 다음과 같아야합니다

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