Увеличить масштаб страницы на 100% с помощью JS

Я создал небольшую игру в 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%"

Есть идеи, как программно установить масштаб страницы?

Ответы

Ответ 1

Вы можете установить свойство 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/

Ответ 2

Вы можете сбросить код с помощью этого:

$("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">' );
});

Ответ 4

Единственный способ, который я нашел, который работает изначально - это разработка моего HTML/CSS с единицами "vw" и "vh" (% относительно области просмотра) вместо "px". Вы можете использовать его везде, где использовали "px" (размер шрифта, ширина, высота, отступы, поля и т.д.). Очень полезно для страницы, предназначенной для отображения только в полноэкранном режиме (без прокрутки) или "в стиле киоска". "vw" и "vh" не зависят от масштабирования браузера. Смотрите: https://www.w3schools.com/cssref/css_units.asp

Ответ 5

Это работает в Chrome 66:

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

Ответ 6

Для мобильных браузеров ответ @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.