have tried all these questions and answers listed, and nothing works for me!
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
so here's it,
I was playing around with html canvas, it works great on my pc, phone and tablet. The code I'm working on,
<!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>
When the orientation of the tablet is changed and tried to enter some text into the textbox, the canvas element is resized to something strange.
The screenshots:
1. in portrait mode, when keyboard is shown
, the canvas shrinks to the viewport height!
2. in landscape mode, canvas is rendered well,
3. in landscape mode, when the keyboard is shown
the canvas shrinks to something weird!.
How do I fix the canvas re-sizing when the keyboard is pressed on
.
Environment: Chrome 42.0.x on Android 5.1.1
Thanks PS: Background image is just used for demonstration, the actual plan is to canvas and graphic.