移动设备上的全屏画布

Question

移动设备上的全屏画布

5

我创建了一个小型的画布游戏，希望它能在电脑和移动设备上都能运行。在电脑上，画布区域按预期工作，但在设计移动设备时出现问题。是否有一种方法（CSS或JavaScript），使网站内的画布区域在用户双击时变为全屏？除非画布足够大以适合整个屏幕，否则无法玩游戏，但我发现很难缩放画布以使其在移动设备上完全全屏。换句话说，我想要一个CSS或JavaScript / jQuery解决方案，以在移动设备上全屏（将设备上的缩放设置为完全适合画布区域）画布区域。示例

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

尝试在iPhone上双击，例如。 iPhone Safari的默认操作是缩放画布，但仍然不能完美适应画布。目前我们应该忽略纵横比，但如果画布的纵横比与设备屏幕不同，答案还应在顶部和底部添加一些黑色空白条。或者，换句话说：当用户双击时，我希望屏幕“锁定”在画布上，禁用平移或缩放，直到用户再次双击。

- XCS

3个回答

3

尝试一下，不确定是否有效：重要的内容被^^^^^^^^标出。

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 */
}

- aNewStart847

1

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

使用html5可以轻松实现许多功能。您可以利用全屏API，在所有最新的浏览器、移动设备和桌面PC上都应该能够正常工作。这里是一个例子：

<!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(..) 上工作。

- Alex

你用的是哪个浏览器？Safari吗？它的版本是多少？你能否尝试一下其他浏览器？ - Alex

1

在任何移动浏览器上都无法正常工作，我尝试了：三星Galaxy S6上的Chrome，运行iOS8的iPhone Plus 6上的Safari，以及运行4.4.3的Kindle Fire上的Silk - 它们都显示地址栏 - 唯独iOS8上的Safari非常奇怪，如果你从竖屏开始然后旋转到横屏，它就会全屏，但如果你从横屏开始，它就会显示地址栏 - 结论是 - 没有可靠的方法在所有主要移动平台上获得全屏画布。 - Shaun Neal

啊，刚意识到这个问题是专门针对移动设备的 :F 看起来大多数移动浏览器目前还不支持这个HTML5功能，这真是遗憾...希望这很快会改变。感谢提供信息！ - Alex

iOS可能永远不会支持它，因为他们没有真正的方法来从行为不当的全屏模式中逃脱。 - leewz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mf511 · Accepted Answer

来源：

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

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

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

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

这已经确保了Canvas以其本机分辨率呈现。