휴대 전화에서 HD 게임을 만들 수 있도록 JavaScript의 CSS 픽셀 비율을 취소하려면 어떻게해야합니까?

Question

나는 순수한 JavaScript/CSS/HTML로 게임을 해왔으며, 1920x1080 휴대 전화에서 내 게임을 픽셀 디스플레이 비율 3 인 586x330으로 표시하는 문제가 발생했습니다. 알고 싶습니다. 내 게임은 고해상도 일 때 저해상도 게임을하고 싶지 않기 때문에 HD 화면에서 실행됩니다.

웹 브라우저 (데스크톱 또는 모바일)에서 게임을 실행할 때 픽셀 밀도가 1이므로 모든 것이 정상입니다. PhoneGap을 사용하여 Android 앱으로 실행할 때 문제가 발생합니다.

어떤 도움을 주시면 감사하겠습니다.

감사합니다, 나는 그것이 대부분의 게임을위한 그래픽 기반의대로 <canvas> 요소를 사용하고 있으리라 믿고있어

Answer 1

.

인라인 width 및 height 속성을 사용하여 크기를 조정해야합니다. 인라인, 나는 사람이 그대로 HTML에 포함 된 의미 : 당신이 있는지 확인하려면 것은 다른 크기가 캔버스에 적용되고 있지 있다는 것입니다

<canvas width="--your width--" height="--your height--"> 
</canvas> 

. 이것의

없음 :

/* style.css */ 
canvas { 
    transform: scale(1.5, 1.5); 
} 

그리고이 심지어 없음 :

/* style.css */ 
canvas { 
    width: 100%; 
    height: 100%; 
} 

건은 캔버스가 작동하는 해상도의 픽셀의 수는 정의되어 있지 않은 것을 만 인라인 width 및 height 속성에 따라 물론

/* thing.js */ 
var resizeCanvas = function() { 
    var canvasElem = getYourCanvasElement(); 

    canvasElem.width = getWidthOfScreen(); 
    canvasElem.height = getHeightOfScreen(); 
} 

// Make sure canvas fits initially... 
whenPageLoads(resizeCanvas); 

// And then resize it whenever needed 
whenScreenSizeChanges(resizeCanvas); 

당신이있어 프레임 워크 모르는 : 당신은 당신의 캔버스 휴대 전화 화면과 동일한 해상도를 가지고 싶다면 당신은 width 및 height 때마다 화면 크기 변경을 수정하는 자바 스크립트를 사용할 필요가 그래서 코드는 단지 템플릿 일 뿐이다. getYourCanvasElement, getWidthOfScreen, getHeightOfScreen, whenPageLoads 및 whenScreenSizeChanges을 구현하는 방법을 결정해야합니다.

편집 : 캔버스의 크기에 영향을 줄 수있는 다른 하나는 브라우저 뷰포트 크기 조정입니다. 그 좋은 통찰력은 here입니다.