web-dev-qa-db-ja.com

JSで100％のページズームを強制する

Canvasで小さなゲームを作成しましたが、問題があります。デフォルトのズームが100％以外に設定されている一部のユーザーは、ゲームページ全体を見ることができません。

私はこのCSSを使ってみました：

zoom: 100%;

このHTML

<meta name="viewport" content="initial-scale=1.0 , minimum-scale=1.0 , maximum-scale=1.0" />

そしてこのJS：

style="zoom: 75%"

プログラムでページのズームを設定する方法はありますか？

javascripthtmlbrowserzoom
32
Crocsx

ページの読み込み時にzoomプロパティを設定できます

document.body.style.zoom = 1.0

ただし、zoomは すべてのブラウザの標準プロパティではありません です。代わりにtransformを使用することをお勧めします。

var scale = 'scale(1)';
document.body.style.webkitTransform =  scale;    // Chrome, Opera, Safari
 document.body.style.msTransform =   scale;       // IE 9
 document.body.style.transform = scale;     // General

http://jsfiddle.net/5RzJ8/

37
Fırat Deniz

これでコードをリセットできます：

$("input, textarea").focusout(function(){
    $('meta[name=viewport]').remove();
    $('head').append('<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">');

    $('meta[name=viewport]').remove();
    $('head').append('<meta name="viewport" content="width=device-width, initial-scale=yes">' );
});
7
Linden

これは非常に役立つ答えだと思います すべての最新のブラウザでページのズームレベルを検出する方法 。それから 答え IEの質問に対する：

document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;
4
dizel3d

ネイティブに機能することがわかった唯一の方法は、「px」ではなく「vw」および「vh」（ビューポートに対する％）の単位でHTML/CSSを設計することです。 「px」を配置するために使用したすべての場所で使用できます（フォントサイズ、幅、高さ、パディング、マージンなど）。全画面のみ（スクロールなし）または「キオスクスタイル」で表示するように設計されたページに非常に便利です。 「vw」と「vh」はブラウザのズームの影響を受けません。参照： https://www.w3schools.com/cssref/css_units.asp

1
Matt Roy

chrome 66で動作しています：

document.body.style.zoom = (window.innerWidth / window.outerWidth)
1
Mehdi Souregi

モバイルブラウザーの場合、@ Lindenの答えはChromeで私にとって最もうまくいきました。しかし、モバイルFFではいくつかの追加の調整が必要であり、両方のブラウザーで動作するバージョンになりました。

let restore = $('meta[name=viewport]')[0];
if (restore) {
    restore = restore.outerHTML;
}
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">');
if (restore) {
    setTimeout(() => {
        $('meta[name=viewport]').remove();
        $('head').append(restore);
    }, 100); // On Firefox it needs a delay > 0 to work
}

また、復元されたページビューポートタグには、リセット後にFirefoxでズームできるように明示的な最大スケールが必要であるため、最初にこれを設定します。

<meta name="viewport" content="width=device-width, maximum-scale=10">

モバイルでテスト済みChrome 76.0およびモバイルFirefox 68.1。

0
Artem Vasiliev