admin管理员组文章数量:1558091
移动端,使用手机浏览器打开一个网页,双指可以进行网页的缩放,非常方便
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/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 浏览器不兼容,暂时还没有找到完善的解决方案。
另外是还原后,不能再进行缩放了,除非刷新页面。
版权声明:本文标题:使用js还原浏览器的缩放 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1727378851a1111817.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论