當橫向顯示鍵盤時HTML畫布斷裂

已嘗試列出所有這些問題和解答，並且對我來說沒有任何作用！當橫向顯示鍵盤時HTML畫布斷裂

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畫布玩耍，它的作品在我的電腦，手機和平板電腦巨大的。我工作的代碼，

<!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元素被重新調整到一些奇怪的事情。

截圖：

on tablet portrait

1.在縱向模式下，當鍵盤shown，畫布縮小到視口的高度！

on tablet landscape

2.在橫向模式下，畫布渲染的很好，

on tablet landscape with keyboard on

在橫向模式3中，當鍵盤shown畫布縮小到什麼奇怪！

如何在按下鍵盤時修復畫布大小調整on。

環境：鉻42.0.x在Android 5.1.1

感謝 PS：背景圖像只是用於示範，實際的計劃是帆布和圖形。

來源

2015-06-04 x0x

嘗試使用固定的位置吧：

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

來源

2015-06-05 00:02:29 K3N

我怎麼錯過了定位！這樣可行！謝謝。 – x0x

當橫向顯示鍵盤時HTML畫布斷裂

回答

相關問題