使用js还原浏览器的缩放

最新推荐文章于 2024-06-16 11:10:10 发布

只看远方

最新推荐文章于 2024-06-16 11:10:10 发布

阅读量1w

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/niedewang/article/details/79542289

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

移动端，使用手机浏览器打开一个网页，双指可以进行网页的缩放，非常方便

1：缩放前
这里写图片描述

2：缩放后
这里写图片描述

3：有没有一种方法，可以还原到原始状态呢。
目前发现一种方法，动态修改viewport,head 中增加标签

 <meta name="viewport" id="view1" content="width=device-width, initial-scale=1, maximum-scale=3.0, user-scalable=yes" />

使用js 脚本

document.getElementById('view1').setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no');

4：完整代码块

<!DOCTYPE html>
<html style="font-size:14px">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" id="view1" content="width=device-width, initial-scale=1, maximum-scale=3.0, user-scalable=yes" />
    <title>网页缩放</title>
</head>
<body>
<p>网页缩放</p>
<div style="border: solid 1px;" >
    <input id="btn_restore" type="button" value="恢复" />
    <p>使用双指进行缩放，点击恢复按钮，恢复到100% </p>
    <p>
        <img width = '100%' src="http://www.runoob.com/try/demo_source/img_chania.jpg"   width="460" height="345">
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
        Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
    </p>
</div>
<script>
    document.getElementById('btn_restore').addEventListener('click',function(){
        document.getElementById('view1').setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no');

    });
</script>
</body>
</html>

4：兼容性与缺陷
目前浏览器内核，基本上都是基于谷歌,目前测试的是，兼容微信和谷歌浏览器。
safari 浏览器不兼容，暂时还没有找到完善的解决方案。
另外是还原后，不能再进行缩放了，除非刷新页面。

只看远方

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
5
评论
使用js还原浏览器的缩放

移动端，使用手机浏览器打开一个网页，双指可以进行网页的缩放，非常方便1：缩放前 2：缩放后 3：有没有一种方法，可以还原到原始状态呢。目前发现一种方法，动态修改viewport,head 中增加标签 &lt;meta name="viewport" id="view1" content="width=device-width, initial-scale...
复制链接

扫一扫