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>

这是我在移动设备上看到的屏幕截图 - “移动”灰色框应该填满移动设备但不支持。它缩小了 - 我的容器仍然是300px宽，但它周围的身体964px。不知道是怎么回事？

enter image description here

我也尝试过媒体查询。这可以在桌面上调整大小时使用，但移动设备仍然会加载桌面内容吗？

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

向某些用户代理显示内容 - 内容在移动设备上显示较小？

1 个答案: