移动设备不要判断js文件,只要PC设备判断js文件,该怎么做的?

发布于 2022-09-01 17:38:42 字数 2371 浏览 18 评论 0

PC端判断鼠标滚动放大缩小导航栏代码,但移动设备都不要有菜单导航放大缩小的特效。
如何不让手机有菜单放大缩小的特效?请高手能来帮忙,真的感激不已!

是放大缩小导航的js代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>天文网站</title>
<meta charset="utf-8">
<style>
* { margin: 0; padding: 0;}
.menu .header { position: fixed; left: 0; top: 0; width: 100%; background-color: #323436;}
.menu .inner { width: 1000px; margin: 0 auto; overflow: hidden; zoom: 1;}
.menu h1 { float: left;}
.menu h1 img { display: block; border: 0;}
.menu .nav { float: right; list-style-type: none; font-family: "Microsoft Yahei";}
.menu .nav li { float: left; margin-left: 5px;}
.menu .nav a { float: left; color: #cecece; text-decoration: none;}
.menu .nav a:hover { background-color: #555;}

.menu .large .inner { padding: 20px 0;}
.menu .large h1 img { height: 64px;}
.menu .large .nav { padding-top: 10px;}
.menu .large .nav a { height: 44px; padding: 0 20px; line-height: 44px; font-size: 18px;}

.menu .small .inner { padding: 10px 0;}
.menu .small h1 img { height: 34px;}
.menu .small .nav { padding-top: 3px;}
.menu .small .nav a { height: 28px; padding: 0 10px; line-height: 28px; font-size: 14px;}

.menu .header, .menu .inner, .menu a, .menu img, .menu li { transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s;}

</style>
</head>

<body class="menu">
<div class="header large">
    <div class="inner">
        <h1><a href="http://www.mycodes.net/"><img src="images/logo.png" alt="logo"></a></h1>
        <ul class="nav">
            <li><a class="cur" href="" title="">首页</a></li>
            <li><a href="" title="">摄影</a></li>
            <li><a href="" title="">软件</a></li>
            <li><a href="" title="">天文</a></li>
        </ul>
    </div>
</div>


<script src="js/jquery.min.js"></script>
// 放大缩小的特效
<script>
$(function(){
    $(window).on('scroll', function(){
        if($(window).scrollTop() > 100){
            $('.header').removeClass('large').addClass('small');
        } else {
            $('.header').removeClass('small').addClass('large');
        }
    });
});
</script>
</body>
</html>

例如

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

扎心 2022-09-08 17:38:42

泻药。

你就是想在移动端没有缩放效果是吧,一般做移动开发,主要改的东西在meta中。

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" />

其中 initial-scale=1.0 就是控制页面缩放的

推荐阅读下,希望可以帮助你

1 web-mobile
2 hybrid
3 ios

如果你要判定js的加载方式,可以参考以前我回答的一个答案isClient.

白日梦 2022-09-08 17:38:42

判断浏览器ua,然后根据ua来判断要不要这部分代码。

var pc,ua;
/*根据ua的情况来判断`pc`的值*/
if(pc){
    $(window).on('scroll', function(){
        if($(window).scrollTop() > 100){
            $('.header').removeClass('large').addClass('small');
        } else {
            $('.header').removeClass('small').addClass('large');
        }
    });
}
怂人 2022-09-08 17:38:42

除了浏览器标识外,其实还有个土法……
如果ViewPort那里可以设置为设备宽度的话,其实可以考虑直接判断窗口的宽度…………

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文