怎么在手机浏览器上'page zoom'

Question

有两种缩放方式。 'pinch zoom' 您在移动浏览器上获得的内容会从屏幕边缘消失。以及您在桌面浏览器上获得的 'page zoom'，就像您执行 Ctrl + 时一样。在 'page zoom' 之后页面是 re-flowed，因此使用响应式布局您仍然可以看到整个页面宽度。

如何允许用户在移动设备上'page zoom'？

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

我已经尝试了涉及 CSS transform: scale(...) 和 HTML <meta name="viewport" ...> 的解决方案，并从 JavaScript 中更改了这些解决方案。但是这些好像都有'pinch zoom'的效果，不是我追求的页面缩放。还 transform: scale(...) 导致 js based/pixelbased 交互类型出现问题，例如我使用的可拖动。

我还考虑过将 JavaScript 的字体大小更改为 CSS。但这仅适用于文本，不适用于图像、<div>s 等。

Answer 1

  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 2

更改所有内容的字体大小？所以基本上，您定义的每个字体大小都需要使用 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>

Answer 3

如果您可以复制 "pinch zoom"，那么您可以使用广泛支持的 document.body.style.zoom 属性。

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

document.body.style.zoom = 2;

Answer 4

很抱歉回答我自己的问题，但经过大量修改后，我找到了一种适合我的方法并且似乎适用于大多数网站，所以我认为它值得分享：

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 和 whosebug.com，但不是 gmail。我自己的网络应用程序需要下面描述的补丁。

更完整的解决方案，带有 jQuery 的补丁：

使用上述解决方案（以及缩放后），当 JavaScript 尝试测量像素位置并使用它们定位其他元素时会出现问题。这是因为像 getBoundingClientRect() returns 坐标乘以 scale 这样的函数。如果您使用 jQuery .height()、.width()、offset() 等，您会遇到同样的问题；所有 jQuery 文档都说，"dimensions may be incorrect when the page is zoomed by the user".

您可以修复 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.

来缩放它们

怎么在手机浏览器上'page zoom'

How can I 'page zoom' on mobile browser

html

javascript

css

mobile

zooming