Question

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

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

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

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

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

Answer 1

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

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

document.body.style.zoom = 2;

Answer 2

Apologies for answering my own question, but after a lot of tinkering, I found a way that works for me and seems to work on most web sites, so I thought it was worth sharing:

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);

The trick is to scale up the body with a scale transform, but then reduce the height and width. Reducing the height and width causes it to re-flow and keep the transformed content on the screen.

I tested the above code by pasting it into the console of Chrome Firefox and IE on several popular websites. It seems to perfectly re-scale amazon.com and stackoverflow.com, but not gmail. My own web app needed the patches described below.

Fuller solution with patches for jQuery:

With the above solution (and after pinch zoom), issues occur when JavaScript tries to measure pixel positions and use them to position other elements. This is because functions like getBoundingClientRect() returns coordinates multiplied by scale. If you use jQuery .height(), .width(), offset() etc. you get the same issue; all jQuery docs says, "dimensions may be incorrect when the page is zoomed by the user".

You can fix jQuery methods like .width() so deliver values as they would be if were viewing it with scale = 1.

Edit since jQuery 3.2.0: height(), width(), etc. have been fixed and do not require the patch shown below. But offset() still needs the patch and if you use $(window).height() or width() to find the size of the view-port you will need to divide by scale.

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);

The only other issue I found was in code (like dragging and drawing etc) that uses positions from events like mousedown, touchstart, mousemove, touchmove etc. I found you had to scale pageX and pageY by dividing them by scale.

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作为其单位（例如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>

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

4 个答案: