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

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

После щелчка по изображению "масштабируемое пользователем" разрешено, а максимальный масштаб установлен на 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");
});

iphone mobile javascript ipad viewport
person user1177986    schedule 30.01.2012    source источник
comment
упомянутое вами решение использует CSS для масштабирования, а не собственное масштабирование, применяемое к области просмотра. Если вы хотите применить это решение, вам следует переосмыслить масштабирование, чтобы оно выполнялось css + javascript.   -  person BBog    schedule 27.07.2012
comment
Если вам интересно, я написал ответ (здесь) [stackoverflow.com/questions/22639296/ об этой конкретной проблеме. Решение, которое работает (для меня) вопреки всем решениям, найденным в ответе на ваш вопрос или другой вопрос.   -  person Alexis Wilke    schedule 10.09.2017

Ответы (2)


arrow_upward
1
arrow_downward

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

person Trott    schedule 01.08.2012

arrow_upward
1
arrow_downward

Работает во всех современных браузерах. Я сделал это на нескольких веб-сайтах, и все работают нормально. Но сброс - это не решение проблемы. При изменении обстоятельств вам необходимо правильно изменить масштаб и ширину области просмотра. Вам нужно изменить его при изменении ориентации и при изменении размера экрана и, конечно же, при загрузке, когда размер экрана определяется. Если вы получите значения для текущей ширины, вы можете рассчитать масштаб. (Кстати, при ориентации 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);
person Selay    schedule 10.03.2014
comment
Не во всех браузерах. Этот метод поддерживается только в браузерах Webkit и IE10 + только для видовых экранов шириной менее 400 пикселей. Для Firefox в настоящее время вам необходимо добавить новый элемент мета-области просмотра. - person hexalys; 17.05.2014