gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 16:36:08 24 4
gpt4 key购买 nike

这是我的代码: 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 像素。不知道这是怎么回事?

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;}
}

任何帮助都会很棒,因为我很好而且真的迷路了!

最佳答案

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

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

关于jquery - 向特定用户代理显示内容 - 内容在移动设备上显示很小吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28197820/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com