Принудительное передвижение браузера с помощью Javascript

Ответ 1

Прокопайте множество других вопросов, пытаясь получить что-то, чтобы уменьшить масштаб, чтобы соответствовать всей странице. Этот вопрос был наиболее актуальным для моих потребностей, но ответа не было. Я нашел этот похожий вопрос, который имел решение, хотя и выполнялся по-разному, а не то, что мне нужно.

Я придумал это, что, по-видимому, работает в Android по крайней мере.

• initial-scale=0.1: Замедляет очень далеко. Должен раскрыть весь ваш сайт (а затем и некоторые).
• width=1200: перезаписывает начальную шкалу, устанавливает ширину устройства до 1200.

Вы хотите изменить 1200 на ширину вашего сайта. Если ваш сайт является отзывчивым, вы можете просто использовать initial-scale=1. Но если ваш сайт является отзывчивым, вам, вероятно, это не нужно в первую очередь.

function zoomOutMobile() {
  var viewport = document.querySelector('meta[name="viewport"]');

  if ( viewport ) {
    viewport.content = "initial-scale=0.1";
    viewport.content = "width=1200";
  }
}

zoomOutMobile();

Ответ 2

Я столкнулся с подобной проблемой, скорее, наоборот, но решение, безусловно, одно и то же. В моем случае у меня есть миниатюра, которую люди нажимают, которая открывает "всплывающее окно", где пользователи, вероятно, будут увеличивать масштаб, чтобы видеть лучше, и после этого я хочу вернуться на обычную страницу со шкалой 1.0.

Чтобы сделать это, я немного огляделся, пока не понял, что произойдет, и затем может написать правильный код.

Определение вида просмотра в метаданных является живым значением. При изменении система учитывает новое значение и соответственно исправляет рендеринг. Тем не менее, "когда изменено" обнаружено GUI, а во время работы JavaScript-кода поток графического интерфейса в основном блокируется...

Имея это в виду, это означало, что выполнение чего-то подобного не получится:

viewport = jQuery("meta[name='viewport']");
original = viewport.attr("content");
force_scale = original + ", maximum-scale=1";
viewport.attr("content", force_scale); // IGNORED!
viewport.attr("content", original);

Итак, поскольку единственный способ определить масштаб - заставить его внести изменения, которые я не хочу сохранять, я должен reset вернуться к оригиналу. Но промежуточные изменения не рассматриваются и не действуют (большая оптимизация!), Так как мы разрешаем эту проблему? Я использовал функцию setTimeout():

viewport = jQuery("meta[name='viewport']");
original = viewport.attr("content");
force_scale = original + ", maximum-scale=1";
viewport.attr("content", force_scale);
setTimeout(function()
    {
        viewport.attr("content", original);
    }, 100);

Здесь я сплю 100 мс, прежде чем возвращать видовое окно обратно к тому, что считаю нормальным. Таким образом, окно просмотра принимает параметр maximum-scale=1 в учетной записи, затем он выдает время и удаляет этот параметр. Масштаб был изменен на 1 в процессе, и восстановление моего оригинала (который не имеет параметра maximum-scale) работает как ожидалось (т.е. Я могу снова масштабировать интерфейс).

ПРЕДУПРЕЖДЕНИЕ 1: Если у вас есть параметр maximum-scale в вашем оригинале, вы, вероятно, захотите его заменить, а не просто добавить другое значение в конце, как в моем примере кода. (т.е. force_scale = original.replace(/maximum-scale=[^,]+/, "maximum-scale=1") выполнит замену - но это работает только в том случае, если уже есть maximum-scale, поэтому сначала вам нужно проверить, разрешить ли любой случай.)

ПРЕДУПРЕЖДЕНИЕ 2: Я пробовал с 0ms вместо 100ms, и он терпит неудачу. Это может отличаться от браузера к браузеру, но семейство Mozilla запускает сразу же таймерный код таймера назад, что означает, что процесс GUI никогда не получит возможность reset масштабирования до 1 до выполнения функции до reset в окне просмотра. Также я знаю, как узнать, что текущие значения видового экрана были обработаны графическим интерфейсом... (т.е. Это, к сожалению, хак.)

Ответ 3

Как и решение Radley Sustaire, мне удалось заставить unzoom всякий раз, когда устройство повернуто в React with

  zoomOutMobile = () => {
    const viewport = document.querySelector('meta[name="viewport"]');

    if ( viewport ) {
      viewport.content = 'initial-scale=1';
      viewport.content = 'width=device-width';
    }
  }

и внутри моего рендера

this.zoomOutMobile();

1 краевой случай, который я нашел, не работает в браузере Firefox.

Ответ 4

Это работает для меня

let sw = window.innerWidth;
let bw = $('body').width();
let ratio = sw / bw - 0.01;
$('html').css('zoom', ratio);
$('html').css('overflow-x', 'hidden');

Его подгоняет html для экранирования и предотвращает прокрутку. Но это не очень хорошая идея и работа не везде.

Ответ 5

var zoomreset = function() {
    var viewport = document.querySelector("meta[name='viewport']");
    viewport.content = "width=650, maximum-scale=0.635";
    setTimeout(function() {
        viewport.content = "width=650, maximum-scale=1";
    }, 350);
}
setTimeout(zoomreset, 150);

замените 650 шириной вашей страницы