这是我的代码: 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>
这是我在移动设备上看到的屏幕截图 - “移动”灰色框应该填满移动屏幕，但实际上没有。它按比例缩小 - 我的容器仍然是 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;}
}
任何帮助都会很棒，因为我很好而且真的迷路了!
最佳答案
尝试使用 viewport meta tag ! - 特别是
<meta name="viewport" content="width=device-width, initial-scale=1">
关于jquery - 向特定用户代理显示内容 - 内容在移动设备上显示很小吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28197820/