3

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

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

有没有办法（CSS 或 javascript）使网站内的画布区域在用户双击时变为全屏？除非画布足够大以适合整个屏幕，否则您无法玩游戏，但我发现很难缩放以使画布在移动设备上完全全屏。

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

例子

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

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

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

4

3 回答 3

7

从：

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 以其原始分辨率呈现。

于 2012-11-30T11:03:10.230 回答
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 */
}
于 2012-12-11T12:43:03.790 回答
1

编辑：看起来 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-03T07:29:47.357 回答