账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    如何用js恢复手机浏览器页面到初始的缩放比例?
    47
    0

    有一个手机上浏览的网页,我通过手势把页面放大了(没有写相关的手势控制代码,是手机浏览器自带的手势缩放功能),经过测试发现它实际是改变了浏览器的window.innerWidth/window.innerHeight这两个属性的数值,而window.outerWith/window.outerHeight都没有变化。那么问题来了,有没有方法 用js 把浏览器恢复到初始比例呢?
    我已经尝试过下面的方法,都不行:
    1.直接修改window.innerWidth/window.innerHeight这一对值,没有任何变化
    2.window.resizeTo():只有部分手机浏览器支持,而且缩放后浏览器自带的手势控制缩放功能失效了;
    3.css3的transform:scale():这个好像只能操作页面Dom元素,最多只能对body进行缩放,貌似浏览器并没有缩放,而且这样缩放后发现window.innerWidth/window.innerHeight这两个值没有任何变化;
    4.js动态改变viewport的值,还是没反应。。。
    被这个问题困扰好久了,有没有大神给我指点一下?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 在JavaScript中,可以使用MutationObserver API来监听DOM的变化,然后在变化发生时应用一些函数来恢复页面的原始缩放比例。

      以下是一个简单的示例:

      ```javascript // 创建一个MutationObserver对象 const observer = new MutationObserver(function(mutationsList) { mutationsList.forEach(function(mutation) { if (mutation.type === 'childList') { // 如果是子节点的变化,那么需要恢复到原始缩放比例 const restoreNode = mutation.target; const node = document.querySelector(restoreNode); node.style.transform = 'scale(1)'; } }); });

      // 开始观察器 observer.observe(document.body, { childList: true });

      // 遍历DOM变化 document.body.querySelectorAll('*').forEach(function(element) { element.style.transform = 'scale(1)'; }); ```

      在这个示例中,我们首先创建了一个MutationObserver对象,然后使用它来监听childList事件。如果这个事件发生,那么我们将查找这个元素,并恢复它的原始缩放比例。

      请注意,这个方法可能会有一些性能问题,因为它需要在每次变化发生时都检查DOM。如果你的页面很大,那么你可能需要使用其他方法来恢复页面的原始缩放比例。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部