3

小さなキャンバス ゲームを作成しましたが、PC とモバイル デバイスの両方で動作するようにしたいと考えています。

PC ではキャンバス領域は期待どおりに機能しますが、モバイル デバイス向けにデザインするときに問題が発生します。

ユーザーがダブルタップしたときに Web サイト内のキャンバス領域がフルスクリーンになる方法 (CSS または JavaScript) はありますか? キャンバスが画面全体に収まるほど大きくないとゲームをプレイできませんが、モバイル デバイスでキャンバスが完全に画面いっぱいになるようにズームするのは難しいと思います。

言い換えれば、CSS または javascript/jQuery ソリューションを全画面表示 (キャンバス領域に完全に合うようにデバイスのズームを設定) する必要があります。モバイル デバイスのキャンバス領域です。

例

canvas{
    width:624;
    height:351;
    background:red;
}

たとえば、iPhone でダブルタップしてみてください。iPhone の Safari のデフォルトのアクションは、キャンバスと同じくらいズームすることですが、それでもキャンバスに完全にフィットしません。今のところ、アスペクト比は無視する必要がありますが、キャンバスのアスペクト比がデバイスの画面と同じでない場合は、上下に空白の黒いストリップを追加する答えも素晴らしいでしょう:D

または、別の言い方をすると、ユーザーがダブルタップすると、画面がキャンバスを「ロック」し、ユーザーが再度ダブルタップするまでパンまたはズームが無効になります。

4

3 に答える 3

7

から：

http://impactjs.com/documentation/impact-on-mobile-platforms#always-render-in-the-native-resolution

キャンバス上の 1 ピクセルがデバイスの画面の 1 ピクセルに直接対応していない場合、表示する前にブラウザでキャンバス全体をスケーリングする必要があります。これは非常に遅くなります。

ほとんどのモバイル ブラウザは、viewport メタ タグをサポートしています。このタグを使用すると、ページのズーム レベルを 1、つまりズームなしに固定できます。

<meta name="viewport" content="width=device-width; 
    initial-scale=1; maximum-scale=1; user-scalable=0;"/>

これにより、キャンバスがネイティブ解像度でレンダリングされることが保証されます。

于 2012-11-30T11:03:10.230 に答える
2

これを試してみてください。うまくいくかどうかはわかりません: ^^^^^^^^ で下線が引かれている重要事項

HTML-head

<meta id="metaset" name="viewport" content="**Whatever** user-scalable=yes;">
         ^^^^^^^^^                                       ^^^^^^^^^^^^^^^^^^

jQuery:

var settings = $("#metaset").attr("content");
$(put selector here).click(function() {
    if ($(this).hasClass("full")) {
        $(this).removeClass("full");
        $("meta").attr("content",settings+"user-scalable=yes");
    } else {
        $(this).addClass("full");
        $("meta").attr("content",settings+"user-scalable=no");
    }
});

CSS:

canvas.full {
    width: 100%;
    height: 100%;
    /* Other fullscreen CSS */
}
于 2012-12-11T12:43:03.790 に答える