流畅的布局，窗口的宽度未在移动（WP）浏览器上调整大小

Question

我正在尝试构建一个支持移动视图的简单 Web 布局。 我所做的只是here。如果我调整窗口大小，则在 firefox 或 chrome 上成功更改了布局。
但是，当我尝试在我的 Windows Phone 浏览器上打开它时，页面的宽度没有跟随我手机的屏幕宽度，所以布局没有改变。
如果窗口的宽度小于 450 像素，我会设置要更改的布局（移动视图）。
我的手机纵向宽度为 400 像素，横向宽度为 800 像素。
这是来源：

<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">

这应该可以解决问题。