向特定用户代理显示内容 - 内容在移动设备上显示很小吗？

Question

这是我的代码：http://jsfiddle.net/1s1owxwk/

$(document).ready(function(){
            if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
                $('#container.mobile').fadeIn(500);
            } else {
                $('#container.desktop').fadeIn(500);
            }
        });

基本上，我所做的只是为移动设备显示移动内容，为桌面设备显示桌面版本。

出于某种奇怪的原因，当我尝试在线查看此内容时，内容显得较小？有人知道为什么会这样吗？

完整代码

<!DOCTYPE html>
<html>
<head>
    <title>CODE</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                $('#container.mobile').fadeIn(500);
            } else {
                $('#container.desktop').fadeIn(500);
            }
        });
    </script>

    <style type="text/css">
        #container.desktop {width: 960px; height: 300px; background: #e3e3e3; display: none; margin: 0 auto;}
        #container.mobile {width: 300px; height: 300px; background: #333; display: none; margin: 0 auto;}
    </style>

</head>
<body>


<div id="container" class="desktop"></div>
<div id="container" class="mobile"></div>


</body>
</html>

这是我在移动设备上看到的屏幕截图 - "mobile" 灰色框应该填满移动屏幕，但没有填满。它按比例缩小 - 我的容器仍然是 300 像素宽，但它周围的主体是 964 像素。不知道这是怎么回事？

我也尝试过媒体查询。这在桌面上调整大小时有效，但无论如何移动设备仍会加载桌面内容？

@media (min-width: 0px) and (max-width: 480px) {
        #container.desktop {display: none;}
    }       

    @media (min-width: 480px) and (max-width: 6000px) {
        #container.mobile {display: none;}
    }

任何帮助都会很棒，因为我真的很迷茫！

Answer 1

尝试使用 viewport meta tag！ - 特别是

<meta name="viewport" content="width=device-width, initial-scale=1">

向特定用户代理显示内容 - 内容在移动设备上显示很小吗？

Displaying Content to certain user agent - Content displays small on mobile?

css

jquery

jquery-mobile