Javascript 我怎么能'；页面缩放'；关于移动浏览器

有两种类型的缩放。你在移动浏览器上看到的“收缩缩放”，内容从屏幕边缘消失。还有桌面浏览器上的“页面缩放”，比如按Ctrl+键。在“页面缩放”之后，页面会重新流动，因此使用响应式布局，您仍然可以看到整个页面宽度

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

我想在我网站的标题栏上可能会有一个Zoom+和Zoom-按钮。我之所以想要这个，是因为我有一个大多数用户都喜欢的web应用程序，无论是在桌面浏览器还是移动浏览器上。但一些能力较弱的用户发现，在他们的一些移动设备上，该网站很小，而且非常灵活。收缩缩放功能（我没有禁用）是一种帮助，但它意味着不断放大和缩小以导航

我已经尝试了涉及CSS

转换：scale（…）

和HTML

的解决方案，并从JavaScript中修改了它们。但这一切似乎都有“收缩缩放”的效果，而不是我所追求的页面缩放。另外，transform:scale（…）会导致基于js/基于像素的交互类型出现问题，例如我使用的draggable

我还研究了如何从JavaScript更改CSS字体大小。但这只适用于文本，而不适用于图像，

s等。

您好，您可以试试这个
  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>

css:
div{
利润率：150像素；
宽度：200px；
高度：100px；
背景颜色：黄色；
边框：1px纯黑；
边框：1px纯黑；
-ms变换：比例（2,3）；/*IE 9*/
-webkit转换：缩放（2,3）；/*Safari*/
变换：缩放（2,3）；/*标准语法*/
}
Html:
此div元素是其原始宽度的两倍，是其原始高度的三倍。

更改所有内容的字体大小？因此，基本上，您定义的每个字体大小都需要使用

em

作为其单位（例如，而不是

px

），以使其成为默认字体的一小部分

然后可以设置正文的字体大小（在

px

中）以更改所有字体的大小

函数缩放页面（金额）{
var currentSize=Number（window.getComputedStyle（document.body，null）.getPropertyValue（'font-size'））.match（/\d+/）；
日志（编号（currentSize）、金额（currentSize+金额））；
document.body.style.fontSize=（当前大小+金额）+“px”；
}

正文{
字体大小：20px；
字体系列：无衬线；
最大宽度：300px；
}
#小的{
字体大小：0.5em；
}
诺里斯先生{
字体大小：20px；
}

+-
我是大文本
我是小文本

我是更小的文本，即使我也是一个段落

如果您可以复制“收缩缩放”，那么您可以使用广泛支持的

document.body.style.zoom

属性

请尝试在控制台中运行此命令：

document.body.style.zoom = 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却没有。我自己的web应用程序需要下面描述的补丁

更全面的解决方案，带有jQuery补丁：

使用上述解决方案（以及在收缩缩放之后），当JavaScript尝试测量像素位置并使用它们定位其他元素时会出现问题。这是因为像

getBoundingClientRect（）

这样的函数返回坐标乘以

scale

。如果使用jQuery

.height（）

、

.width（）

、

offset（）

等，则会出现相同的问题；所有jQuery文档都说，“当用户缩放页面时，维度可能不正确”

您可以修复jQuery方法，如

.width（）

，以便按照使用

scale=1

查看时的方式传递值

从jQuery 3.2.0开始编辑：高度（）、宽度（）等已修复，不需要下面显示的修补程序。但是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

可能是@supercolhandsomegelboy的副本，我不认为它是1156278的副本，因为

transform:scale（…）

是一种“收缩缩放”。另外，

transform:scale（…）

会导致基于js/像素的交互类型出现问题，例如我使用的DragTable。如果你想用javascript控制缩放，这需要大量的计算，并且无法在短时间内回答。正如我在问题中所述，

transform:scale（…）

解决方案不起作用。如果我将你的风格应用到包裹我整个

的

上，身体的边缘会从屏幕上流血。你的代码可以很好地更改字体大小，但我的CSS有很多图像

等。大小和位置都是

px

大小。我真的希望页面上的所有内容都能一起调整大小，就像桌面浏览器上的Ctrl+/-。@James然后在

em

中指定所有内容，除了要用作“边界”框的容器的宽度之外。@James有一种更简单的方法可以做到这一点，但你说要回流，所以我假设您希望边界框保持相同的大小。如果你只是想复制一部手机的不带手势的捏缩缩放，我可以提供另一个答案。@James