如何使用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" />


$(document).ready(function () {
      $("#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布局会向上扩展
• 如何在iPhone上更改方向更改时重置Web应用程序的缩放/缩放？

Jeremy Keith(@adactio)在他的博客定位和规模上有一个很好的解决方案

通过不在标记中设置最大比例来保持标记的可扩展性.

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

然后在加载javascript时禁用可伸缩性,直到使用此脚本再次允许可伸缩性时的gesturestart:

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);
    }
}