通過簡單查詢修改jquery移動視口

我在StackExchange上看到了許多答案，感覺我越來越接近但仍是最後一個問題。我想要做的是 - 如果我的移動頁面中有一個表格，請設置指定的視口，如果沒有，則設置另一個定義的視口。這裏的基本代碼...通過簡單查詢修改jquery移動視口

<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分支如何。我已經檢查了鉻調試器，沒有任何東西。我有一種感覺，它是pagebefore事件。我試過了頁面展示和pagebeforeshow。我是否試圖在頁面循環的錯誤部分更改視口？我在正確的軌道上嗎？任何其他想法？由於

來源

2014-05-21 DysonGuy

其實我發現，如果我換成這個代碼 -

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

然後我視正在動態設置和預期工作。

來源

2014-05-22 13:00:40 DysonGuy

通過簡單查詢修改jquery移動視口

回答

相關問題