javascript - 获取移动页面的比例

Question

我有一个 jquery 移动页面，其元视口(viewport)设置如下:

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

一切正常，但如果第二页(“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