我在一家移动网上商店工作，在实现产品缩放功能时卡住了
在点击图片“用户可缩放”并将最大比例设置为10.0之后，当用户使用收缩手势放大产品时，一切正常。但关闭缩放图像后，比例不会重置为1.0。
有没有办法动态重置视口的比例值。“初始尺度”似乎不起作用，将“最小尺度”和“最大尺度”重置为1.0也不起作用。
在iPhone / iPad上出现问题
似乎有一个解决方案，但我不知道我应该将这篇文章中的How to reset viewport scaling without full page refresh?应用于哪个元素
“您需要使用- webkit -transform: scale(1.1)；webkit transition。”
但我不知道该样式应用于哪个元素。
这里有一些代码来说明这个问题。
在视口的meta标记中，如下所示：
<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");
});回答 2
Stack Overflow用户
发布于 2012-08-01 02:36:20
According to ppk，这种操作视口的技术可以在除火狐之外的所有现代浏览器上运行：
<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轻松地选择它并替换content属性的值。
Stack Overflow用户
发布于 2014-03-10 01:00:49
它可以在所有现代浏览器中运行。我已经在一些网站上这样做了，所有的工作都很好。但是重置并不是解决问题的办法。当环境发生变化时，需要适当地更改缩放和视口宽度。当方向改变时，当屏幕尺寸改变时，你需要改变它，当然，当检测到屏幕尺寸时，你需要在加载时改变它。如果您获得当前宽度的值，则可以计算比例。(顺便说一下，当方向为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);https://stackoverflow.com/questions/9066499
复制
相似问题
Symfony 2此表单不应包含额外的字段
Symfony2.4窗体“此表单不应包含额外字段”错误
表单不应包含额外的字段Symfony 4
Symfony 2表单错误“此表单不应包含额外字段。提交表格时
Symfony2“此表单不应包含额外字段”与集合和动态字段的错误
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
