移动设备上的全屏画布答案

【问题标题】：Full screen canvas on mobile-devices移动设备上的全屏画布
【发布时间】：2016-03-09 22:54:52
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

标签： javascript css canvas mobile-devices

【解决方案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 以其原始分辨率呈现。

【讨论】：

我不能以某种方式缩放画布以使其与屏幕一样大吗？（至少宽度或高度，不弄乱纵横比）

【解决方案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 */
}

【讨论】：

【解决方案3】：

编辑：看起来 html5 全屏 API 目前在大多数移动设备浏览器中无法正常工作。（见 cmets）

有了 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(..) 上工作

【讨论】：

你用的是哪个浏览器？苹果浏览器？哪个版本呢？你也可以试试其他浏览器吗？
不适用于我尝试过的任何移动浏览器：galaxy s6 上的 chrome，运行 ios8 的 iphone plus 6 上的 safari，运行 4.4.3 的 kindle fire 上的 Silk - 所有这些都显示地址栏 - 除了非常奇怪- ios8 上的 safari，如果你从纵向开始然后旋转到横向，它会全屏显示，但如果你从横向开始，它会显示地址栏 - 结论 - 没有可靠的方法可以在所有主要移动平台上获得全屏画布
呃，刚刚意识到这个问题是专门针对移动设备的：F 所以到目前为止，大多数移动浏览器似乎都不支持这个 html5 功能，很遗憾......希望这会很快改变.感谢您的信息！
iOS 可能永远不会支持它，因为他们真的没有办法摆脱行为不端的全屏