javascript - 手机浏览器怎么显示 'page zoom'

Question

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

如何允许用户在移动设备上“页面缩放”？

我想我网站的标题栏上可能有一个 Zoom + 和 Zoom - 按钮。我想要这个是因为我有一个大多数用户喜欢的网络应用程序，无论是在桌面浏览器还是移动浏览器上。但是一些能力较差的用户发现该网站在他们的某些移动设备上很小而且很笨拙。双指缩放功能(我没有禁用)很有帮助，但这意味着要不断放大和缩小以进行导航。

我尝试过涉及 CSS 的解决方案 transform: scale(...)和 HTML <meta name="viewport" ...>并从 JavaScript 改变这些。但是这些似乎都具有“捏缩放”效果，而不是我所追求的页面缩放。 transform: scale(...) 也会导致基于 js/pixelbased 的交互类型出现问题，例如我使用的 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。我自己的网络应用需要下面描述的补丁。

带有 jQ​​uery 补丁的更完整的解决方案:

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

您可以修复像 .width() 这样的 jQuery 方法，以便传递值，就像使用 scale = 1 查看它时的值一样。

从 jQuery 3.2.0 开始编辑:height()、width() 等已得到修复，不需要下面显示的补丁。但是 offset() 仍然需要补丁，如果您使用 $(window).height() 或 width() 来查找视口(viewport)的大小，您将需要按比例划分。

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 来缩放它们。