有没有办法将视口的比例动态重置为 1.0

Question

我在一家移动在线商店工作并在实现产品缩放功能时陷入困境

单击图像后允许“用户可缩放”并且最大比例设置为 10.0 当用户通过捏合手势放大产品时，一切正常。 但关闭缩放图像后，比例不会重置为 1.0。

有没有办法动态重置视口的比例值。 “初始比例”似乎不起作用，将“最小比例”和“最大比例”重置为 1.0 也不起作用

iPhone / iPad 上出现问题

似乎有解决方案，但我不知道哪个我应该在这篇文章中应用以下元素： 如何在不刷新整页的情况下重置视口缩放？

“您需要使用 -webkit-transform:scale(1.1); webkit 转换。”

但我不知道该样式应用于哪个元素。

这是一些代码来说明问题。

在视口的元标记中，看起来像这样：

<meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0" />

页面的其余部分看起来像这样：

<div id="page">
    <img src="images/smallProductImage.jpg">
</div>

<div id="zoom">
    <div class="jsZoomImageContainer"></div>
</div>

这是 javascript::

zoom:{
    img: null,
    initialScreen:null,

    load:function(src){             

        //load the image and show it when loaded

        showLoadingAnimation();
        this.img = new Image();
        this.img.src = src;

        jQuery(this.img).load(function(){
            zoom.show();
        });
    },

    show:function(){

        var screenWidth, screenHeight, imageWidth, imageHeight, scale, ctx;             

        hideLoadingAnimation();
        jQuery("#page").hide();         
        jQuery("#zoom").show();

        jQuery(".jsZoomImageContainer").empty();
        this.initialScreen =[jQuery(window).width(),  jQuery(window).height()]
        jQuery(".jsZoomImageContainer").append(this.img);               


        imageWidth = jQuery(this.img).width();
        imageHeight = jQuery(this.img).height();

        scale = this.initialScreen[0] / imageWidth ;

        jQuery(this.img).width(imageWidth * scale)
        jQuery(this.img).height(imageHeight * scale)


        jQuery(".jsZoomImageContainer").click(function(){
             zoom.hide();
        });

        jQuery('meta[name="viewport"]',"head").attr("content","user-scalable=yes, initial-scale:1.0, minimum-scale=1.0, maximum-scale=10.0")                 

    },

    hide:function(){                        
        jQuery(".jsZoomImageContainer").empty();                        
        jQuery('meta[name="viewport"]',"head").attr("content","user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0") 

        jQuery("#zoom").hide();
        jQuery("#page").show();

        this.img = null;
        this.initialScreen = null;

    }
}

jQuery("#page img").click(function(){
    zoom.load("images/bigProductImage.jpg");
});

Answer 1

根据 ppk，这种视口操作技术适用于所有现代除 Firefox 之外的浏览器：

<meta id="testViewport" name="viewport" content="width = 380">
<script>
if (screen.width > 740) {
    var mvp = document.getElementById('testViewport');
    mvp.setAttribute('content','width=740');
}
</script>

似乎关键是在 meta 标记中设置 id 属性，这样您就可以轻松地用 JS 选择它并替换它的值内容属性。

Answer 2

它适用于所有现代浏览器。我已经在几个网站上做到了，一切都工作正常。
但重置并不能解决问题。当情况发生变化时，您需要正确更改比例和视口宽度。
当方向改变和屏幕尺寸改变时，当然还有检测到屏幕尺寸时加载时，您需要更改它。如果获得当前宽度的值，则可以计算比例。 （顺便说一句，当方向为90或-90时，您应该将高度作为宽度）。
例如，
如果您的主容器宽度为 960px，则 w_width 是您动态获取的当前宽度。

scale=100/100/(960/w_width);
scale=scale.toFixed(2) ;
jQuery('meta[name=viewport]').attr('content', "width="+w_width+", initial-scale="+scale);