прибудет масштаб мобильной страницы

Question

У меня есть JQuery мобильной страница с метой-видовой установить так:

<meta id="testViewport" name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/> 

Моей страницы (ы) выложены как это (это упрощенное)

<div data-role="page" id="article1"> 
    <div data-role="content"> 
    //page 1 stuff 
    </div> 
</div> 

     <div data-role='page' id='article2'> 
    <div data-role='content'> 
    //page 2 stuff 
    </div> 
</div> 

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

$(document).on('swipeleft', '.ui-page', function (event) { //swipe to plot 
    if (event.handled !== true) // This will prevent event triggering more then once 
    { 
     var nextpage = $.mobile.activePage.next('[data-role="page"]'); 
     // swipe using id of next page if exists 
     if (nextpage.length > 0) { 
      $.mobile.changePage(nextpage, { 
       transition: "slide", 
       reverse: false 
      }, true, true); 
     } 
     event.handled = true; 
    } 
    var mvp = document.getElementById('testViewport'); 
    mvp.setAttribute('content', "width=device-width,height=device-height,minimum-scale=1,maximum-scale=4"); 
    return false; 
}); 

$(document).on('swiperight', '.ui-page', function (event) { //swipe to input 
    if (event.handled !== true) // This will prevent event triggering more then once 
    { 
     var prevpage = $(this).prev('[data-role="page"]'); 
     if (prevpage.length > 0) { 
      $.mobile.changePage(prevpage, { 
       transition: "slide", 
       reverse: true 
      }, true, true); 
     } 
     event.handled = true; 
    } 
    var mvp = document.getElementById('testViewport'); 
    mvp.setAttribute('content', "width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"); 
    return false; 
}); 

каждого вещь работает хорошо, но я бы хотел отключить «swipe navigation» (извините, если эта терминология неверна), если масштаб второй страницы («artice2») больше 1, но я не могу выяснить, как получить значение масштаба страницы. В случае, если вы не можете сказать, я очень новичок в этом ... поэтому примеры очень ценятся.

Answer 1

Что вы можете сделать, это сохранить высоту и ширину экрана после отображения страницы pagecontainershow. И затем, на проведите по экрану, чтобы получить текущую высоту и ширину. Если текущая высота/ширина больше, чем высота/ширина, проигнорируйте прогиб .

/* vars */ 
var windowWidth, windowHeight, currentW, currentH; 

$(document).on("pagecontainershow", function (e, data) { 
    windowWidth = window.innerWidth; 
    windowHeight = window.innerHeight; 
}).on("swipeleft", "[data-role=page]", function (e) { 
    currentW = window.innerWidth; 
    currentH = window.innerHeight; 
    if (currentW == windowWidth && currentH == windowHeight && $(this).next("[data-role=page]").length != 0) { 
     $.mobile.pageContainer.pagecontainer("change", $(this).next("[data-role=page]"), { 
      transition: "flip" 
     }); 
    } 
}).on("swiperight", "[data-role=page]", function (e) { 
    currentW = window.innerWidth; 
    currentH = window.innerHeight; 
    if (currentW == windowWidth && currentH == windowHeight && $(this).prev("[data-role=page]").length != 0) { 
     $.mobile.pageContainer.pagecontainer("change", $(this).prev("[data-role=page]"), { 
      transition: "flip", 
      reverse: true 
     }); 
    } 
}); 

Demo