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

概述我在一家移动网上商店工作,并在实施产品缩放功能时遇到困难 点击图像后,允许“用户可扩展”,最大比例设置为10.0 当用户使用捏捏手势放大产品时,一切正常. 但是关闭缩放图像后,刻度不会重置为1.0. 有没有办法动态地重置视口的缩放值. “初始规模”似乎不起作用,也没有将“最小规模”和“最大规模”重新定为1.0 iPhone / iPad上出现问题 似乎有一个解决方案,但我不知道我应该在这个帖子应用 我在一家移动网上商店工作,并在实施产品缩放功能时遇到困难

点击图像后,允许“用户可扩展”,最大比例设置为10.0
当用户使用捏捏手势放大产品时,一切正常.
但是关闭缩放图像后,刻度不会重置为1.0.

有没有办法动态地重置视口的缩放值.
“初始规模”似乎不起作用,也没有将“最小规模”和“最大规模”重新定为1.0

iPhone / iPad上出现问题

似乎有一个解决方案,但我不知道我应该在这个帖子应用哪个元素：
How to reset viewport scaling without full page refresh?

“你需要使用-webkit-transform：scale(1.1); webkit转换”.

但是我不知道应用哪种元素.

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

在视口的Meta标签中看起来像这样：

<Meta @R_403_6889@="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/smallProduc@R_502_5411@.jpg"></div><div ID="zoom">    <div ></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[@R_403_6889@="vIEwport"]',"head").attr("content","user-scalable=yes,initial-scale:1.0,maximum-scale=10.0")                     },hIDe:function(){                                jquery(".JsZoomImageContainer").empty();                                jquery('Meta[@R_403_6889@="vIEwport"]',"user-scalable=no,initial-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/bigProduc@R_502_5411@.jpg");});

解决方法 According to ppk,这种视口 *** 纵技术适用于除firefox之外的所有现代浏览器：

<Meta ID="testVIEwport" @R_403_6889@="vIEwport" content="wIDth = 380"><script>if (screen.wIDth > 740) {    var mvp = document.getElementByID('testVIEwport');    mvp.setAttribute('content','wIDth=740');}</script>

似乎关键是在元标记中设置ID属性,以便您可以使用Js轻松选择它,并替换content属性的值.

总结

以上是内存溢出为你收集整理的javascript – 有没有办法将视口的比例动态地重置为1.0全部内容，希望文章能够帮你解决javascript – 有没有办法将视口的比例动态地重置为1.0所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。