首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >有没有办法将视口的比例动态重置为1.0

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

Stack Overflow用户
提问于 2012-01-30 23:42:50
回答 2查看 14.6K关注 0票数 14

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

在点击图片“用户可缩放”并将最大比例设置为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标记中,如下所示:

代码语言:javascript
代码运行次数:0
运行
复制
<meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0" />

页面的其余部分如下所示:

代码语言:javascript
代码运行次数:0
运行
复制
<div id="page">
    <img src="images/smallProductImage.jpg">
</div>

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

这是javascript::

代码语言:javascript
代码运行次数:0
运行
复制
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");
});
EN

回答 2

Stack Overflow用户

发布于 2012-08-01 10:36:20

According to ppk,这种操作视口的技术可以在除火狐之外的所有现代浏览器上运行:

代码语言:javascript
代码运行次数:0
运行
复制
<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属性的值。

票数 1
EN

Stack Overflow用户

发布于 2014-03-10 09:00:49

它可以在所有现代浏览器中运行。我已经在一些网站上这样做了,所有的工作都很好。但是重置并不是解决问题的办法。当环境发生变化时,需要适当地更改缩放和视口宽度。当方向改变时,当屏幕尺寸改变时,你需要改变它,当然,当检测到屏幕尺寸时,你需要在加载时改变它。如果您获得当前宽度的值,则可以计算比例。(顺便说一下,当方向为90或-90时,您应该将高度作为宽度)。例如,如果您的主容器的宽度是960px,而w_width是您动态获取的当前宽度。

代码语言:javascript
代码运行次数:0
运行
复制
scale=100/100/(960/w_width);
scale=scale.toFixed(2) ;
jQuery('meta[name=viewport]').attr('content', "width="+w_width+", initial-scale="+scale);
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9066499

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档