如何在移动浏览器上“缩放”页面

Question

有两种类型的缩放。 您可以在移动浏览器上获得“缩放缩放”，其中内容从屏幕边缘消失。 您可以在桌面浏览器上使用“页面缩放”，例如在执行Ctrl +时。 在“页面缩放”之后，页面将重新流动，因此，响应式布局仍然可以看到整个页面宽度。

如何让用户在移动设备上“缩放”？

我想我的网站标题栏上可能有一个Zoom +和Zoom - 按钮。 我想要这个，因为我有一个大多数用户喜欢的网络应用程序，包括桌面和移动浏览器。 但是一些能力较弱的用户在他们的某些移动设备上发现这个网站很小而且很繁琐。 捏缩放（我没有禁用）的能力是一个帮助，但它意味着不断放大和缩小导航。

我尝试过涉及CSS transform: scale(...)解决方案transform: scale(...)和HTML <meta name="viewport" ...>并从JavaScript中改变这些。 但这些似乎都有“捏缩放”效果，而不是我追求的页面缩放效果。 另外变换：scale（...）会导致基于js /像素的交互类型出现问题，例如我使用的draggable。

我还研究了从JavaScript改变CSS字体大小。 但这仅适用于文本，而不适用于图像， <div>等。

Answer 1

对于回答我自己的问题表示歉意，但经过大量的修修补补后，我发现了一种适用于我的方式，似乎适用于大多数网站，所以我认为值得分享：

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补丁的Fuller解决方案：

使用上述解决方案（以及捏缩放后），当JavaScript尝试测量像素位置并使用它们来定位其他元素时会出现问题。 这是因为像getBoundingClientRect()这样的函数返回坐标乘以scale 。 如果你使用jQuery .height() .width() ， offset()等你会遇到同样的问题; 所有jQuery文档都说，“当页面被用户缩放时，尺寸可能不正确”。

您可以修复像.width()这样的jQuery方法，以便在使用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 。

Answer 2

如果您可以复制“缩放缩放”，则可以使用广泛支持的document.body.style.zoom属性。

尝试在您的控制台中运行它：

document.body.style.zoom = 2;

Answer 3

  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>

Answer 4

改变一切的字体大小？ 所以基本上，你定义的每个字体大小都需要使用em作为它的单位（例如ppt而不是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>