모바일 장치의 전체 화면 캔버스

저는 작은 캔버스 게임을 만들었으며 PC와 모바일 장치에서 모두 작동하도록하고 싶습니다.모바일 장치의 전체 화면 캔버스

PC에서 캔버스 영역은 예상대로 작동하지만 모바일 장치를 설계 할 때 문제가 발생합니다.

사용자가 두 번 탭하면 웹 사이트의 캔바스 영역이 전체 화면이 될 수있는 방법 (CSS 또는 javascript)이 있습니까? 캔버스가 전체 화면에 맞을만큼 큰 경우가 아니면 게임을 할 수 없지만 모바일 장치에서 캔버스가 전체 화면으로 확대되도록 확대하는 것이 어렵습니다.

다른 말로하면 휴대 기기의 캔바스 영역에 CSS 또는 javascript/jQuery 솔루션을 전체 화면 (캔버스 영역에 완벽하게 맞도록 장치를 확대/축소 설정)으로 지정해야합니다.

Example

canvas{ 
    width:624; 
    height:351; 
    background:red; 
}

예를 들어 아이폰을 두 번 눌러보십시오. iPhone의 Safari에서 기본 동작은 캔버스만큼 확대/축소하는 것이지만 여전히 캔버스에 완벽하게 맞지는 않습니다. 지금은 가로 세로 비율을 무시해야하지만 캔버스의 가로 세로 비율이 기기 화면과 동일하지 않은 경우 상단 및 하단에 빈 검은 색 띠가 추가되는 대답은 다음과 같습니다. D

또는, 다르게 넣기 : 사용자가 두 번 살짝 누르면 화면이 캔버스에 "고정"되고, 사용자가 다시 두 번 탭할 때까지 이동 또는 확대/축소가 비활성화됩니다.

출처

2012-10-31 Cristy

에서 : - 매우 느린하는

http://impactjs.com/documentation/impact-on-mobile-platforms#always-render-in-the-native-resolution

이 당신의 캔버스에 하나의 픽셀에 직접 장치의 화면 전체를 캔버스의 하나 개의 픽셀에 해당하지 않는 경우 것은 표시되기 전에 브라우저에 의해 조정되어야한다 .

대부분의 모바일 브라우저는 뷰포트 메타 태그를 지원합니다. 이 태그를 사용하면 페이지의 확대/축소 수준을 1로 고정 할 수 있습니다. 즉 확대/축소 할 수 없습니다.

<meta name="viewport" content="width=device-width; 
    initial-scale=1; maximum-scale=1; user-scalable=0;"/>

이렇게하면 캔버스가 기본 해상도로 렌더링됩니다.

var settings = $("#metaset").attr("content"); 
$(put selector here).click(function() { 
    if ($(this).hasClass("full")) { 
     $(this).removeClass("full"); 
     $("meta").attr("content",settings+"user-scalable=yes"); 
    } else { 
     $(this).addClass("full"); 
     $("meta").attr("content",settings+"user-scalable=no"); 
    } 
});

CSS : 중요 물건 ^^^^^^^^

, HTML head

<meta id="metaset" name="viewport" content="**Whatever** user-scalable=yes;"> 
     ^^^^^^^^^          ^^^^^^^^^^^^^^^^^^

jQuery를에 의해 밑줄 : 작품이 경우

출처

2012-11-30 11:03:10 mf511

캔버스를 화면 크기만큼 확대 할 수 없습니까? (가로 세로 비율을 어지럽히 지 않고 너비 또는 높이 이상) – Cristy

, 확실하지 않은이 시도 :

canvas.full { 
    width: 100%; 
    height: 100%; 
    /* Other fullscreen CSS */ 
}

출처

2012-12-11 12:43:03 aNewStart847

편집 : 현재 모바일 장치 용 브라우저에서 html5 fullscreen-API가 제대로 작동하지 않는 것으로 보입니다. (댓글보기)

html5로 모든 것이 쉬워집니다. 전체 화면 API를 사용할 수 있습니다. 모든 최신 브라우저, 모바일 장치 및 데스크탑 PC에서 작동해야합니다.여기 예 :

<!doctype html> 
<!--[if IE 6]><html lang="en" class="no-js ie6"><![endif]--> 
<!--[if (gt IE 6)|!(IE)]><!--><html lang="en" class="no-js"><!--<![endif]--> 

<head> 
    <title>Canvas full screen</title> 
</head> 

<body onload=draw();> 
     <canvas id="canvas">Please update your browser! </canvas> 
</body> 
<script> 
     function draw(){ 
     var canvas = document.getElementById("canvas"); 
     var ctx = canvas.getContext("2d"); 

     ctx.font = 'italic bold 30px sans-serif'; 
      //Need to use measure text 
     ctx.fillText("Click!",20,100); 
     } 

    function fullscreen(){ 
     var el = document.getElementById('canvas'); 

      if(el.webkitRequestFullScreen) { 
       el.webkitRequestFullScreen(); 
      } 
      else { 
      el.mozRequestFullScreen(); 
      }    
     } 

    document.getElementById('canvas').addEventListener("click",fullscreen) 
</script> 

</html>

내가 직면 한 문제는 다음과 같습니다. 몇 가지 이벤트 리스너를 사용해야합니다. document.ready (..)에서 직접 작동하지 않습니다.

출처

2014-04-03 07:29:47 Alex

ios8을 사용하는 iphone 6에서 작동하지 않습니다 –

사용한 브라우저는 무엇입니까? 사파리? 어떤 버전입니까? 다른 브라우저에서 사용해 볼 수도 있습니까? – Alex

내가 시도한 모든 모바일 브라우저에서 작동하지 않습니다. Chrome on galaxy s6, iphone 8의 사파리, ios8 실행중인 실크, 4.4.3 실행중인 실크 - 모두 이상적인 경우를 제외하고 주소 표시 줄 표시 - ios8의 사파리 세로로 시작한 다음 가로로 회전하여 전체 화면으로 이동하지만 가로로 시작하면 주소 표시 줄이 표시됨 - 결론 - 모든 주요 모바일 플랫폼에서 전체 화면 캔버스를 얻을 수있는 확실한 방법이 없음 –

모바일 장치의 전체 화면 캔버스

답변

관련 문제