-1 
<!doctype html>
<html>
  <head>
    <title>Game</title>

    <style media="screen" type="text/css">
      body, html {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      #canvas {
        position: absolute;
      }
    </style>

    <!-- <meta charset="utf-8" content="width=device-width, initial-scale=1.0"> -->
    <!-- <meta charset="utf-8"> -->
    <!-- <meta charset="utf-8" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> -->
  </head>

  <body>
    <canvas id="canvas">
      Your browser needs to support canvas to play this game!
    </canvas>

    <!-- Include libraries -->
    <script type="text/javascript" src="js/pentagine/build/pentagine.js"></script>
    <script type="text/javascript" src="js/cp.min.js"></script>

    <!-- Include game classes -->
    <script type="text/javascript" src="js/MenuState.js"></script>
    <script type="text/javascript" src="js/Block.js"></script>
    <script type="text/javascript" src="js/Constants.js"></script>
    <script type="text/javascript" src="js/Utils.js"></script>
    <script type="text/javascript" src="js/ScoreState.js"></script>
    <script type="text/javascript" src="js/PlayState.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
  </body>
</html>

関連する行は CSS と次の行です。

<!-- <meta charset="utf-8" content="width=device-width, initial-scale=1.0"> -->
<!-- <meta charset="utf-8"> -->
<!-- <meta charset="utf-8" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> -->

Canvas をできるだけ多くの画面を占有させたいと考えています。キャンバスを全画面表示にしたいのですが、以前は Firefox、Chromium、Firefox OS の両方で正常に動作していましたが、現在は動作していないようです。キャンバスを作成するための CSS とcontent=""タグを理解するのに助けが必要です (したがって、キャンバスのcontext.widthとcontext.heightはできるだけ多くのスペースを占有します.

4

2 に答える 2

0

これにより、CSS でキャンバスがフルスクリーンになります (テストされていませんが、div で動作するため、キャンバスでも問題ないはずです)。

canvas {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: auto;
    height: auto;
}

JavaScript では、ウィンドウ/ドキュメントの幅/高さを読み取り、それをキャンバスに追加して計算することができます。jQuery では次のようにします。

$(document).height();
$(document).width();

そして、jQueryなしで次のように：

document.width;
document.height;

それがあなたの助けになることを本当に願っています。

于 2013-09-16T19:42:42.273 に答える