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

最新推荐文章于 2025-06-30 15:03:09 发布

Elephant_H

最新推荐文章于 2025-06-30 15:03:09 发布

阅读量4.3k

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/Elephant_H/article/details/78674309

javascript 同时被 2 个专栏收录

13 篇文章

订阅专栏

HTML

4 篇文章

订阅专栏

本文介绍了一种解决网页在屏幕旋转后initial-scale不为1的问题的方法。通过监听orientationchange事件并动态修改meta标签的内容，确保了用户在旋转屏幕后页面的初始缩放比例始终保持为100%。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于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);