jquery - 流体布局，窗口的宽度在移动 (WP) 浏览器上未调整大小

Question

我正在尝试构建一个支持移动 View 的简单网络布局。 我所做的就是here .如果我调整窗口大小，布局在 firefox 或 chrome 上成功更改。
但是，当我尝试在我的 Windows Phone 浏览器上打开它时，页面宽度不符合我手机的屏幕宽度，因此布局没有改变。
如果窗口的宽度小于 450px，我将布局更改为移动 View 。
我的手机纵向宽度为 400px，横向宽度为 800px。
这是来源:

<script src='jquery.js'></script>
<script src='jquery-ui.js'></script>
<style>
    body{
        font-size: 15px;
        }
    #navigation{
        height: 50px;
        position:relative;
        max-width : 1100px;
        margin: 10px auto;
        background: #686868;
    }
    #konten{
        position:relative;
        max-width : 1100px;
        margin: 10px auto;
        background: #ccc;       
    }

    #navigation .ifhide{
        display: block;
        float: left;        
    }
    .ifhide{

        width:100%;
        height: 160px;
    }
@media screen and (min-width: 749px){
    .isi{
        width: 68%;
        height: auto;
        display: inline-block;
        float: left;
        background: #5f0;
    }
    .sidebar{
        width: 30%;
        height: auto;
        display: inline-block;
        float: right;
        background: #afa;   
        }   
    }
@media screen and (max-width: 748px){
    .isi{
        width: 100%;
        height: auto;
        display: inline-block;
        float: left;
        background: #5f0;
        margin-bottom: 5px;
    }
    .sidebar{
        width: 100%;
        height: auto;
        display: inline-block;
        float: right;
        background: #afa;   
        }   
    }
@media screen and (min-width: 451px){
    #navigation a{
        display: inline-block;
        float: left;
    }   
    .home{
        width: 10%;
        height:40px;
        background: #0a0;
    }
    .pictures{
        width: 15%;
        height:40px;
        background: #fa0;
    }
    .videos{
        width: 15%;
        height:40px;
        background: #aff;
    }
    .snd{
        width: 50%;
        height:40px;
        background: #faf;
    }
    .about{
        width: 10%;
        height:40px;
        background: #ffa;
    }
}
@media screen and (max-width: 450px){
    #navigation a{
        display: block;
        float: left;
    }   
    .home{
        width: 50%;
        height:40px;
        background: #fa0;
    }
    .pictures{
        width: 100%;
        height:40px;
        background: #0af;
    }
    .videos{
        width: 100%;
        height:40px;
        background: #aff;
    }
    .snd{
        width: 100%;
        height:40px;
        background: #faf;
    }
    .about{
        width: 100%;
        height:40px;
        background: #ffa;
    }   
    .menu{
        width: 50%;
        height:40px;
        background: #faf;
        float: right;
        }
}
</style>
<script>
    function menu(){
        var itsvar = $(".menu").attr("itsvar");
        if (itsvar == 0){
            $(".ifhide").show({
                easing : "slide",
                duration: 300
                });
            $(".menu").attr("itsvar","1");
        }
        if (itsvar == 1){
            $(".ifhide").hide({
                easing : "slide",
                duration: 300
            });
            $(".menu").attr("itsvar","0");
        }

    }
    $(document).ready(function(){
        var scrwidth = $(window).width();
        if (scrwidth <= 450){
            $(".pictures").detach().appendTo(".ifhide");
            $(".videos").detach().appendTo(".ifhide");
            $(".snd").detach().appendTo(".ifhide");
            $(".about").detach().appendTo(".ifhide");
            $(".menu").show();          
            $(".ifhide").hide();
            }
        })
    $(window).resize(function(){
        var scrwidth = $(window).width();
        var isiwidth = $(".isi").width();
        $(".isi").html("width = "+$(window).width()+"<br>height = "+$(window).height()+"<br>width class isi = "+isiwidth);
        if (scrwidth <= 450){
            $(".pictures").detach().appendTo(".ifhide");
            $(".videos").detach().appendTo(".ifhide");
            $(".snd").detach().appendTo(".ifhide");
            $(".about").detach().appendTo(".ifhide");
            $(".menu").show();

        }
        if (scrwidth > 450){
            $(".about").detach().prependTo("#navigation");
            $(".snd").detach().prependTo("#navigation");
            $(".videos").detach().prependTo("#navigation");
            $(".pictures").detach().prependTo("#navigation");
            $(".home").detach().prependTo("#navigation");
            $(".menu").hide();
            $(".ifhide").hide({});

        }
    });
</script>
<nav id='navigation'>
    <a class='home'>Home</a>
    <a class='pictures'>Pictures</a>
    <a class='videos'>Videos</a>
    <a class='snd'>Search &amp; Development</a>
    <a class='about'>About</a>
    <a class='menu' onclick='menu()' itsvar='0' style='display:none'>Menu</a>
    <div class='ifhide' style='display:none;'>
    </div>
</nav>
<div id="konten">
    <div class='isi'>
        class isi di sini
    </div>
    <div class='sidebar'>
        class sidebar di sini
    </div>

</div>

那么，我是不是漏掉了什么？
为此真的需要 jquery mobile 吗？ (我没加)
注意:我还没有在其他移动浏览器(android、ios)中测试它。

Answer 1

像这样在头部部分添加元标记:

<meta name="viewport" content="width=device-width">

这应该可以解决问题。