Прокрутка увеличена в окне просмотра на мобильном телефоне с помощью Javascript

Question

Можно ли программно настроить увеличенный видовой экран на мобильном устройстве с помощью Javascript?

Мотивация для этого вопроса следующая: в нашем веб-приложении пользователи просматривают документы.В этом документе есть несколько интересных мест, и мы проводим пользователей по этим местам, помещая всплывающее окно рядом с местоположением, содержащим описание и кнопку «Далее», чтобы перейти к следующему местоположению.

На рабочем столеэто работает нормально, потому что весь документ виден, а всплывающее окно обращает их внимание на интересующее место.Однако на мобильном устройстве пользователи будут увеличивать изображение, чтобы лучше рассмотреть конкретное местоположение, и после нажатия кнопки «Далее» мы хотели бы переместить увеличенное мобильное окно просмотра в следующее местоположение.

Я пробовалиграть с window.scrollTo, но это не работает, так как он работает с полным уменьшенным окном просмотра.Можно ли делать то, что я описываю через Javascript?

Answer 1

Мне удалось собрать воедино что-то, что, кажется, работает, основываясь на ответе, который я нашел здесь: https://stackoverflow.com/a/46137189/6052252

Этот код, возможно, мог бы использовать некоторые уточнения, но в качестве отправной точки он, кажется, работает (Примечание:использует jQuery):

function ScaleMetaViewport(initialScale) {
    $('meta[name=viewport]').remove();
    $('head').append('<meta name="viewport" content=""/>');

    var viewport = $("meta[name='viewport']");
    var original = viewport.attr("content");
    var forceScale='';

    if (initialScale) forceScale += "initial-scale=" + initialScale;

    viewport.attr("content", forceScale);
    setTimeout(function()
    {
        viewport.attr("content", original);
    }, 100);
}

//Setting the scaleFactor as follows causes the viewport to zoom out
//as far as possible
var scaleFactor = 1 / window.devicePixelRatio;
ScaleMetaViewport(scaleFactor);

//compute where you want to scroll to
var left = ...
var top = ...
window.scrollTo(left, top);

Из моего тестирования на iPhone это фактически сместит визуальный видовой экран (увеличенная область).На Android он полностью уменьшает масштаб и корректирует расположение в окне просмотра макета в соответствии с window.scrollTo.