Как я могу "увеличить страницу" в мобильном браузере

Существует два типа масштабирования. "Пинч-зум" вы получаете в мобильных браузерах, где контент исчезает с краев экрана. И "масштабирование страницы" вы получаете на настольных браузерах, например, когда вы делаете Ctrl +. После "масштабирования страницы" страница перетекает заново, поэтому с адаптивным макетом вы все еще видите всю ширину страницы.

Как я могу разрешить пользователям "масштабировать страницы" на мобильных устройствах?

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

Я пробовал решения, включающие CSS transform: scale(...) и HTML <meta name="viewport" ...> и изменяющие их из JavaScript. Но все они, похоже, имеют эффект "щепотки", а не масштаб страницы, который я ищу. Также преобразование: масштаб(...) вызывает проблемы с типами взаимодействия на основе js / pixelbased, такими как draggable, которые я использую.

Я также посмотрел на изменение размеров шрифтов CSS из JavaScript. Но это работает только для текста, а не для изображений, <div>и т. д..

4 3
javascript html css mobile zoom

4 ответа:

Если вы согласны с воспроизведением "pinch zoom", то вы можете использовать широко поддерживаемое свойство document.body.style.zoom.

Попробуйте запустить это в консоли: 

document.body.style.zoom = 2;
2

Извиняюсь за ответ на мой собственный вопрос, но после долгих поисков я нашел способ, который работает для меня и, кажется, работает на большинстве веб-сайтов, поэтому я подумал, что стоит поделиться: 

function zoom(scale) {
    document.body.style.transform = "scale(" + scale + ")";
    document.body.style.transformOrigin = "top left";
    document.body.style.width = (100 / scale) + "%";
    document.body.style.height = (100 / scale) + "%";
};
zoom(1.25);
Фокус в том, чтобы увеличить тело с помощью масштабного преобразования, но затем уменьшить высоту и ширину. Уменьшение высоты и ширины приводит к повторному потоку и удержанию преобразованного содержимого на экране.

Я протестировал приведенный выше код, вставив его в консоль Chrome Firefox и IE на несколько популярных сайтов. Кажется, он идеально масштабируется amazon.com и еще stackoverflow.com, но не gmail. Мое собственное веб-приложение нуждалось в патчах, описанных ниже.

Более полное решение с патчами для jQuery:

С вышеуказанным решением (и после pinch zoom) возникают проблемы, когда JavaScript пытается измерить позиции пикселей и использовать их для позиционирования других элементов. Это происходит потому, что такие функции, как getBoundingClientRect(), возвращают координаты, умноженные на scale. Если вы используете jQuery .height(), .width(), offset() и т. д. вы получаете ту же проблему; все документы jQuery говорят: "размеры могут быть неправильными, когда страница масштабируется пользователем".

Вы можете исправить методы jQuery, такие как .width(), так что доставляйте значения, как они были бы, если бы просматривали его с помощью scale = 1.

Редактировать начиная с jQuery 3.2.0: height (), width () и т. д. были исправлены и не требуют патча, показанного ниже. Но offset() все еще нуждается в патче, и если вы используете $(window).height() или width() чтобы найти размер видового порта, вы должны нужно делить по масштабам.

var zoom = (function () {
    var scale = 1, recurLev = 0;
    function alter(fn, adj) {
        var original = $.fn[fn];
        $.fn[fn] = function () {
            var result;
            recurLev += 1;
            try {
                result = original.apply(this, arguments);
            } finally {
                recurLev -= 1;
            }
            if (arguments.length === 0 && recurLev === 0) {
                result = adj(result);
            }
            return result;
        };
    }
    function scalePos(n) { return n / scale; }
    /* Not needed since jQuery 3.2.0
    alter("width", scalePos);
    alter("height", scalePos);
    alter("outerWidth", scalePos);
    alter("outerHeight", scalePos);
    alter("innerWidth", scalePos);
    alter("innerHeight", scalePos);
    */
    alter("offset", function (o) { o.top /= scale; o.left /= scale; return o; });
    return function (s) {
        scale = s;
        document.body.style.transform = "scale(" + scale + ")";
        document.body.style.transformOrigin = "top left";
        document.body.style.width = (100 / scale) + "%";
        document.body.style.height = (100 / scale) + "%";
    };
}());
zoom(1.25);

Единственная другая проблема, которую я нашел, была в коде (например, перетаскивание и рисование и т. д.), который использует позиции из таких событий, как mousedown, touchstart, mousemove, touchmove и т.д. Я обнаружил, что вы должны масштабировать pageX и pageY, разделив их на scale.

2
  Hi you can try this 
  css:
   div {
    margin: 150px;
    width: 200px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
    border: 1px solid black;
    -ms-transform: scale(2,3); /* IE 9 */
    -webkit-transform: scale(2,3); /* Safari */
    transform: scale(2,3); /* Standard syntax */
  }

  Html:
   <div>
This div element is two times of its original width, and three times of its original height.
</div>
1

Изменить размер шрифта на всем? Таким образом, в принципе, каждый размер шрифта, который вы определяете, должен был бы использовать em в качестве его единиц (например, intstead of px), чтобы он стал частью шрифта по умолчанию.

Затем вы можете установить размер шрифта тела (в px), чтобы изменить размер всех шрифтов.

function zoomPage(amount) {
  var currentSize = Number(window.getComputedStyle(document.body, null).getPropertyValue('font-size').match(/\d+/));
  console.log(Number(currentSize), amount, (currentSize + amount));
  document.body.style.fontSize = (currentSize + amount) + 'px';
}
body {
  font-size: 20px;
  font-family: sans-serif;
  max-width: 300px;
}

#smaller {
  font-size: 0.5em;
}

.noresize {
  font-size: 20px;
}
<button class="noresize" onclick="zoomPage(1)">+</button><button class="noresize" onclick="zoomPage(-1)">-</button>
<h1>I am big text</h1>
<p>I am <i>smaller</i> text</p>
<p id="smaller">I am even smaller text, even though I am also a paragraph</p>
1