横向显示键盘时 HTML 画布中断答案

【问题标题】：HTML canvas breaking when keyboard is shown at landscape orientation横向显示键盘时 HTML 画布中断
【发布时间】：2015-08-19 18:06:56
【问题描述】：

已尝试所有列出的问题和答案，但对我没有任何帮助！

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>

当平板电脑的方向改变并尝试在文本框中输入一些文本时，画布元素的大小会被调整为奇怪的东西。

截图：

1.在竖屏模式下，当键盘为shown时，画布收缩到视口高度！

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

3.在横向模式下，当键盘为shown 时，画布会缩小到一些奇怪的东西！

当按下键盘on时，如何修复画布大小调整。

环境：Android 5.1.1 上的 Chrome 42.0.x

谢谢 PS：背景图只是演示用，实际方案是canvas和graphic。

【问题讨论】：

标签： javascript android css html canvas

【解决方案1】：

尝试使用固定位置：

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

【讨论】：