gpt4 book ai didi

javascript - 有没有办法将视口(viewport)的比例动态重置为 1.0

转载 作者:可可西里 更新时间:2023-11-01 01:44:06 25 4
gpt4 key购买 nike

我在一家移动在线商店工作,在实现产品缩放功能时卡住了

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

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

iPhone/iPad 上出现的问题

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

“你需要使用-webkit-transform: scale(1.1); webkit transition。”

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

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

在视口(viewport)的元标记中看起来像这样:

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

最佳答案

According to ppk ,这种视口(viewport)操作技术适用于除 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>

似乎关键是设置一个 id meta 中的属性标记,以便您可以使用 JS 轻松选择它并替换 content 的值属性。

关于javascript - 有没有办法将视口(viewport)的比例动态重置为 1.0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9066499/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com