移动设备上的全屏画布 [英] Full screen canvas on mobile-devices

问题描述

我已经创建了一个小型画布游戏，并且希望它既可以在PC上也可以在移动设备上运行.

I have created a small canvas game and I want it to work both on PCs and mobile devices.

在PC上，画布区域可以按预期工作，但在为移动设备进行设计时会出现问题.

On PC the canvas area works as expected but the problem comes when designing for mobile devices.

有没有一种方法(CSS或javascript)，使用户双击时网站内的画布区域变为全屏显示?除非画布足够大以适合整个屏幕，否则您将无法玩游戏，但是我发现很难缩放以使画布在移动设备上完全显示在整个屏幕上.

Is there a way (CSS or javascript) so that a canvas area inside a website would become full-screen when the user double-taps it? You can't play the game unless the canvas is large enough to fit the entire screen but I find it difficult to zoom so that the canvas is exactly full-screen on the mobile device.

换句话说，我希望CSS或javascript/jQuery解决方案全屏显示(将设备的缩放比例设置为完全适合画布区域)在移动设备上的画布区域.

In other words I want a CSS or javascript/jQuery solution to full-screen (set the zoom on the device to perfectly-fit the canvas area) the canvas area on a mobile device.

示例

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

例如，尝试在iPhone上点按两次. iPhone Safari上的默认操作是缩放〜与画布一样大，但仍不能完美地适合画布.现在我们应该忽略长宽比，但是如果画布的长宽比与设备的屏幕不同，那么还会在顶部和底部添加一些空白的黑色条的答案会很不错:D

Try double-tapping on an iPhone for example. The default action on iPhone's Safari is to zoom ~ as much as the canvas, but it still doesn't perfect fit the canvas. For now we should ignore aspect ratio, but an answer that would also add some blank black strips at the top and bottom if the aspect ratio of the canvas is not the same as the device's screen would be great :D

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

Or, to put it differently: When the users double-tap I want the screen to "lock on" the canvas, disabling panning or zooming until the user double-taps again.

推荐答案

发件人:

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

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

If one pixel on your Canvas does not directly correspond to one pixel of the device's screen the whole Canvas has to be scaled by the browser before being shown – which is extremely slow.

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

Most mobile browser support the viewport meta tag. With this tag you can lock the zoom level of your page to 1, i.e. no zoom.

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

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

This already ensures that the Canvas is rendered in its native resolution.

这篇关于移动设备上的全屏画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！