Question

我创建了一个小型帆布游戏，我希望它能在PC和移动设备上运行。

在PC上，画布区域按预期工作，但在设计移动设备时出现问题。

有没有办法（CSS或javascript），以便当用户双击它时，网站内的画布区域将变为全屏？你不能玩游戏，除非画布足够大以适应整个屏幕，但我发现很难缩放，因此画布在移动设备上完全是全屏的。

换句话说，我想要一个CSS或javascript / jQuery解决方案全屏（在设备上设置缩放以完全适合画布区域）移动设备上的画布区域。

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

例如，尝试双击iPhone。 iPhone Safari的默认操作是缩放〜尽可能多的画布，但它仍然不适合画布。现在我们应该忽略纵横比，但如果画布的纵横比与设备的屏幕不同，答案也会在顶部和底部添加一些空白的黑条：D

或者，换句话说：当用户双击时，我希望屏幕“锁定”画布，禁用平移或缩放，直到用户再次双击。

Answer 1

自：

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

如果Canvas上的一个像素不直接对应设备屏幕的一个像素，则整个Canvas必须在显示之前由浏览器缩放 - 这非常慢。

大多数移动浏览器都支持视口元标记。使用此标记，您可以将页面的缩放级别锁定为1，即无缩放。

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

这已经确保Canvas以其原始分辨率呈现。

Answer 2

试试这个，不确定是否有效： ^^^^^^^^

下划线的重要内容

HTML - head

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

jQuery的：

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：

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

Answer 3

编辑：看起来html5 fullscreen-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（..）

上工作

移动设备上的全屏画布

3 个答案: