如何使用 Javascript 动态更改缩放级别？

Question

我正在尝试弄清楚如何在 ios 网页中重置缩放级别。似乎当用户进行缩放放大/缩小时，缩放功能不再起作用。我想要捏手势，但想以编程方式重置缩放。有人对使用 Javascript/jQuery 动态更改缩放有想法吗？

<meta id="viewportMeta" name="viewport" content="user-scalable=1, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5" /> $(文档).ready(函数 () { $("#zoomOut").click(function(){ $('meta[name=viewport]').attr('content', 'initial-scale=0.5; maximum-scale1; user-scalable=1;'); }); $("#zoomIn").click(function(){ $('meta[name=viewport]').attr('content', 'initial-scale=1; maximum-scale=1.0; user-scalable=1;'); }); });

Answer 1

------更新------

这在 iOS7 中不再是问题。 Scott Jehl 在 github scottjehl/iOS-Orientationchange-Fix 上有更好的解决方案，适用于 iOS6。

------原始答案------

从这些中得到答案：

• iPad layout scales up when rotating from portrait to landscape
• How do I reset the scale/zoom of a web app on an orientation change on the iPhone?

---

Jeremy Keith (@adactio) 在他的博客 Orientation and scale 上有一个很好的解决方案

通过不设置标记的最大比例来保持标记的可伸缩性。

<meta name="viewport" content="width=device-width, initial-scale=1">

然后在加载时使用 javascript 禁用可扩展性，直到使用此脚本再次允许可扩展性时开始手势：

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}