移动端user-scalable=yes页面，旋转屏幕后重置缩放比例。

最新推荐文章于 2023-04-26 00:53:14 发布

Elephant_H

最新推荐文章于 2023-04-26 00:53:14 发布

阅读量4.2k

点赞数 1

分类专栏： HTML javascript 文章标签： viewport 前端 html5 orientatio 横屏

本文链接：https://blog.csdn.net/Elephant_H/article/details/78674309

版权

javascript 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

对于user-scalable=yes的页面，旋转屏幕页面重新渲染后，会出现initial-scale != 1的情况，项目需求用户旋转屏幕，初始缩放比例始终是100%。
可监听页面的orientationchange事件，动态的给meta标签重新赋值达到效果:

window.addEventListener("orientationchange",function(){
       var i = document.getElementsByTagName('meta');
       i[3]["content"] = "width=device-width,user-scalable=yes,initial-scale=1,maximum-scale=2,minimum-scale=1";
       //根据实际情况修改i[n]中的n值
},false);