Есть ли способ динамически сбросить масштаб области просмотра до 1.0 - PullRequest
Новая
       36

Есть ли способ динамически сбросить масштаб области просмотра до 1.0

14 голосов
/ 30 января 2012

Я работаю в мобильном интернет-магазине и застрял при реализации функции масштабирования продукта

После нажатия на изображение разрешено «масштабирование пользователем», а максимальный масштаб - 10,0 Когда пользователь увеличивает масштаб продукта, все работает нормально. Но после закрытия увеличенного изображения масштаб не сбрасывается до 1,0.

Есть ли способ динамического сброса значения масштаба области просмотра. Кажется, что «начальный масштаб» не работает, равно как и сброс «минимального масштаба» и «максимального масштаба» до 1,0

.

Проблема возникает на iPhone / iPad

Кажется, есть решение, но я не знаю, к какому элементу я должен применить этот пост: Как сбросить масштабирование области просмотра без полного обновления страницы?

"Вам необходимо использовать -webkit-transform: scale (1.1); переход webkit."

Но я не знаю, к какому элементу применяется стиль.

Вот некоторый код для иллюстрации проблемы.

В метатеге для области просмотра выглядит так: 

<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 ]

1 голос
/ 10 марта 2014

Работает во всех современных браузерах.Я сделал это на нескольких сайтах, и все работает нормально.Но сброс не является решением проблемы.Вам нужно правильно изменить масштаб и ширину области просмотра, когда обстоятельства меняются.Вы должны изменить его, когда изменяется ориентация, а также когда изменяется размер экрана и, конечно, при загрузке, когда определяется размер экрана.Если вы получаете значения для текущей ширины, вы можете рассчитать масштаб.(Кстати, когда ориентация 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);
1 голос
/ 01 августа 2012

Согласно 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>

Похоже, что ключ устанавливает атрибут id в теге meta, чтобы вы могли легко выбрать его с помощью JS и заменить значение атрибута content.

...