Принудительное передвижение браузера с помощью 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 шириной вашей страницы