移動設備上的全屏畫布

我創建了一個小型帆布遊戲，我希望它可以在個人電腦和移動設備上使用。移動設備上的全屏畫布

在PC上，畫布區域按預期工作，但問題出現在爲移動設備設計時。

有沒有一種方法（CSS或JavaScript），以便當用戶雙擊它時，網站內的畫布區域將變爲全屏幕？除非畫布足夠大以適應整個屏幕，否則無法玩遊戲，但我發現難以縮放以使畫布完全在移動設備上顯示。

換句話說，我希望CSS或JavaScript/jQuery解決方案能夠在移動設備上全屏（在設備上設置縮放以完美適合畫布區域）畫布區域。

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

嘗試在iPhone上的雙攻爲例。 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;"/>

這已確保Canvas以其原始分辨率呈現。

來源

2012-11-30 11:03:10 mf511

難道我不能放大畫布，使它與屏幕一樣大嗎？（至少寬度或高度，而不會影響寬高比） – Cristy

試試這個，不知道，如果作品：

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的強調：

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

來源

2012-12-11 12:43:03 aNewStart847

編輯：看起來像html5全屏API目前無法在大多數瀏覽器中爲移動設備正常工作。（見評論）

隨着html5的東西得到了很大的緩解。您可以使用全屏API。應該適用於所有最新的瀏覽器，移動設備以及臺式電腦。下面的例子：你需要使用一些事件監聽器：

<!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

不適用於我試過的任何移動瀏覽器：銀河s6上的鉻，iPhone上的Safari瀏覽器加上運行ios8的6，在kindle fire上運行4.4.3的絲綢 - 所有這些都顯示地址欄 - 除非非常奇怪 - ios8上的safari，如果你開始縱向然後旋轉到風景它進入全屏，但如果你開始風景它顯示地址欄 - 結論 - 沒有可靠的方式獲得所有主要移動平臺上的全屏畫布 –

移動設備上的全屏畫布

回答

相關問題