解决：移动端横屏旋转页面放大

最新推荐文章于 2024-11-27 08:18:00 发布

差一步距离

最新推荐文章于 2024-11-27 08:18:00 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43748216/article/details/90377475

博客指出可缩放页面旋转屏幕重新渲染后，会出现initial - scale!= 1的情况。解决办法是监听页面的orientationchange事件，动态给meta标签重新赋值来达到预期效果。

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

对于可以缩放的页面，旋转屏幕页面重新渲染后，会出现 initial-scale != 1 的情况，可监听页面的orientationchange事件，动态的给meta标签重新赋值达到效果:

window.addEventListener(
    "onorientationchange" in window ? "orientationchange" : "resize",
    function() {
        var i = document.getElementsByTagName('meta');
        i[1]["content"] = "width=device-width,initial-scale=1,maximum-scale=2,minimum-scale=1";

    },
    false
);