画布高度自动调整- Sketch.js

Question

我正在使用sketch.js为一个移动应用程序提供一个简单的草图板。它只是应该通过设置宽度和高度100%来填充整个屏幕，但是在我点击“草图板”之后，它会调整自己以适应更小的尺寸。在这种情况下，如何将画布设置为全屏？这是我的例子http://jsfiddle.net/66UJ9/

<canvas id='mysketch' style="height:100%; width:100%; border: 1px solid black; "></canvas>

Answer 1

CSS的height属性将不将高度作为窗口的百分比，这正是您所期望的。MDN指出：

该百分比是根据生成的框的包含块的高度计算的。如果未显式指定包含块的高度(即它取决于内容高度)，且该元素不是绝对定位的，则该值将计算为自动。

在您的Fiddle中没有包含块，并且它不是绝对定位的，因此它默认为auto。但是，您可以使用JS将<canvas>的高度设置为浏览器窗口，如下所示：

// Set the <canvas> height to the window's height
$('canvas').css('height', $(window).height());

您可能需要调整这一点，这取决于您的真实页面外观。(JSFiddle正在添加一些将其抛出的填充物。)