Question

我在StackExchange上看了很多答案，感觉我已经接近但仍然是最后一个问题。我正在尝试做的是 - 如果我的移动页面中有一个表格，则设置一个指定的视口，如果没有，则设置另一个已定义的视口。这是基本代码......

    <title>Howdy</title>
<meta name="viewport" id="viewportid"  />

   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
    var myvp;
    $(document).on("pagebeforeshow", function() {
        //  alert("PageCreate Done!");
        alert($('table:visible').length);
        var numTablesOnPage = $('table:visible').length;
        if (numTablesOnPage > 0)
        {
            $("table:visible").each(function() {

                if ($(this).width() > screen.width) {
                    var tableWidth = $(this).width();
                    alert("Table Width: " + $(this).width());
                    alert("Screen Wdith: " + screen.width);
                    myvp= document.getElementById('viewportid');
                    myvp.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes");
                    return false;
                }
                return true;
            });
        }
        else
        {
            alert("no tables");
            mvp = document.getElementById('viewportid');
            mvp.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no");
        }
    });
</script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />

    </script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

我已经在我的html中使用了一个表，并且没有尝试我的if / else语句的两个分支，并且我得到了我已经包含的预期定义的警报。

 myvp.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes");

无论使用何种if / else分支，它似乎都不会应用/更新我的视口设置。我已经检查了chrome调试器，什么都没有。我感觉这是pagebefore事件。我试过了pageshow和pagebeforeshow。我是否试图在页面循环的错误部分更改视口？我是在正确的轨道上吗？还有其他想法吗？感谢

Answer 1

实际上我发现如果我替换了这段代码 -

          mvp = document.getElementById('viewportid');
        mvp.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no");

用这个 -

  $('head').append('<meta name="viewport" content="width=480, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1, user-scalable=yes">');

然后我的视口被动态设置并按预期工作。

通过简单查询修改Jquery Mobile Viewport

1 个答案: