Question

已尝试列出所有这些问题和答案，对我来说没有任何作用！

How to center canvas in html5       Resize HTML5 canvas to fit window

HTML5 Canvas 100% Width Height of Viewport?

Make canvas fill the whole page

Make Html5 Canvas and Its contained image responsive across browsers

jQuery to make HTML5 Canvas Responsive

How to make canvas responsive according to the div parent width

所以就是这样，

我正在使用html canvas，它在我的电脑，手机和平板电脑上运行良好。我正在处理的代码，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Area52</title>
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <style>
    body{
        padding: 0;
        margin: 0;
    }
    .container{
        position: absolute;
        z-index: 0;
    }
    canvas { 
        display: block;
        height: 100%; 
        width: 100%; 
    }

    .details{
        color: #fff;
        top: 150px;
        padding: 20px;
        position: relative;
        z-index: 10;
        font-family: Roboto;
        height: 20px;
    }
    </style>
</head>
<body>
<div class="container">
    <canvas id="myCanvas" style="border:1px solid #000000; background: url('http://upload.wikimedia.org/wikipedia/commons/6/64/The_Puppy.jpg');background-attachment: fixed;background-size: cover;">
    </canvas>
</div>

<div class="details">
    Enter your details:
    <form>
      First name: <input type="text"><br>
      Last name: <input type="text"><br>
      <input type="submit">
    </form>
</div>
</body>
</html>

当更改平板电脑的方向并尝试在文本框中输入一些文本时，画布元素将调整为奇怪的内容。

屏幕截图：

on tablet portrait

1。在纵向模式下，当键盘为shown时，画布缩小到视口高度！

on tablet landscape

2。在横向模式下，画布渲染得很好，

on tablet landscape with keyboard on

3。在横向模式下，当键盘为shown时，画布缩小到一些奇怪的地方！。

如何在按下键盘时修复画布重新调整大小on。

环境：Android 5.1.1上的Chrome 42.0.x

由于 PS：背景图片仅用于演示，实际的计划是画布和图形。

Answer 1

尝试使用固定位置：

canvas { 
    position: fixed;
    left:0;
    top:0;
    height: 100%; 
    width: 100%;
    z-index: -1;  /* place in background */
}

键盘以横向方向显示时，HTML画布断开

1 个答案: