移动设备上的全屏画布

我创建了一个小型帆布游戏，我希望它可以在个人电脑和移动设备上使用。移动设备上的全屏画布

在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，如果你开始纵向然后旋转到风景它进入全屏，但如果你开始风景它显示地址栏 - 结论 - 没有可靠的方式获得所有主要移动平台上的全屏画布 –

移动设备上的全屏画布

回答

相关问题