已尝试列出所有这些问题和答案，但对我没有任何帮助!
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>
当平板电脑的方向改变并尝试在文本框中输入一些文本时， Canvas 元素的大小会调整为奇怪的东西。
截图:
1.竖屏模式下，键盘为
shown时， Canvas 缩小到视口(viewport)高度!
2.在横向模式下， Canvas 渲染良好，
3.横屏模式下，键盘为
shown时 Canvas 缩小到奇怪的东西!如何修复按下键盘时重新调整 Canvas 大小的问题
on .环境:Android 5.1.1 上的 Chrome 42.0.x
谢谢
PS:背景图只是演示用，实际方案是canvas和graphic。
最佳答案
尝试使用固定位置:
canvas {
position: fixed;
left:0;
top:0;
height: 100%;
width: 100%;
z-index: -1; /* place in background */
}
关于javascript - 横向显示键盘时 HTML Canvas 中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30655531/