通过简单查询修改Jquery移动视口

我在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>

---

无论使用了if/else分支，它都不会应用/更新我的视口设置。我已经检查了chrome调试器，什么都没有。我有一种感觉，这是赛前的一页。我试过pageshow和pagebeforeshow。我是否试图在页面周期的错误部分更改视口？我走对了吗？还有其他想法吗？谢谢

事实上我发现如果我替换了这个代码-

          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">');

$（'head'）。追加（''）；

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

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