javascript 有没有办法将视口的比例动态重置为 1.0
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9066499/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to reset the scale of the viewport dynamically to 1.0
提问by user1177986
Im working on a a mobile online-store And got stuck while implementing the product zoom function
我在一家移动在线商店工作并且在实现产品缩放功能时卡住了
After clicking an Image "user-scalable" is allowed and maximum-scale is set to 10.0 When the user zooms in on the product with a pinch gesture, everything works fine. But after closing the zoomed Image the scale is not reset to 1.0.
单击图像后，允许“用户可缩放”并将最大比例设置为 10.0 当用户使用捏合手势放大产品时，一切正常。但是在关闭缩放图像后，比例不会重置为 1.0。
Is there a way to reset the scale value of the viewport dynamically. The "initial-scale" seems not to work, neither does reseting the "minimum-scale" and "maximum-scale" to 1.0
有没有办法动态重置视口的比例值。“初始规模”似乎不起作用，也没有将“最小规模”和“最大规模”重置为 1.0
The problems occurs on iPhone / iPad
问题出现在 iPhone / iPad 上
There seems to be a solution, but i don't know to which element i should apply the on this post: How to reset viewport scaling without full page refresh?
似乎有一个解决方案，但我不知道我应该在这篇文章中应用哪个元素： How to reset viewport scaling without full page refresh?
"You need to use -webkit-transform: scale(1.1); webkit transition."
“你需要使用 -webkit-transform: scale(1.1); webkit transition。”
But I don't know to which element the style is applied.
但我不知道该样式应用于哪个元素。
Here is some code to illustrate the Problem.
这是一些代码来说明问题。
In the meta Tag for the viewport looks like this:
在视口的元标记中，如下所示：
<meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0" />
the rest of the page Looks like this:
页面的其余部分如下所示：
<div id="page">
<img src="images/smallProductImage.jpg">
</div>
<div id="zoom">
<div class="jsZoomImageContainer"></div>
</div>
and this is the javascript::
这是 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");
});
回答by Trott
According to ppk, this technique for viewport manipulation works on all modern browsers except for Firefox:
根据 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>
Seems like the key is setting an idattribute in the metatag so you can select it easily with JS and replace the value of the contentattribute.
似乎关键是id在meta标签中设置一个属性，以便您可以使用 JS 轻松选择它并替换该content属性的值。
回答by Selay
It works in all modern browsers. I have done it in a few websites and all work fine. But resetting is not a solution to the problem. You need to properly change scale and viewport width when circumstances change. You need to change it when orientation changes and when screen size changes and of course on load when screen size is detected. If you get values for current width, you can calculate the scale. (By the way, when orientation is 90 or -90, you should take height as width). For example, If your main container is 960px in width, and w_width is the current width you get dynamically.
它适用于所有现代浏览器。我已经在几个网站上完成了，并且一切正常。但是重置并不能解决问题。当情况发生变化时，您需要正确更改比例和视口宽度。当方向改变和屏幕尺寸改变时，当然当检测到屏幕尺寸时，你需要改变它。如果获得当前宽度的值，则可以计算比例。（顺便说一句，当方向为 90 或 -90 时，您应该将高度视为宽度）。例如，如果您的主容器的宽度为 960 像素，而 w_width 是您动态获得的当前宽度。
scale=100/100/(960/w_width);
scale=scale.toFixed(2) ;
jQuery('meta[name=viewport]').attr('content', "width="+w_width+", initial-scale="+scale);
