移动设备不要判断js文件,只要PC设备判断js文件,该怎么做的?
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
泻药。
你就是想在移动端没有缩放效果是吧,一般做移动开发,主要改的东西在meta中。
其中 initial-scale=1.0 就是控制页面缩放的
推荐阅读下,希望可以帮助你
1 web-mobile
2 hybrid
3 ios
如果你要判定js的加载方式,可以参考以前我回答的一个答案isClient.
判断浏览器ua,然后根据ua来判断要不要这部分代码。
除了浏览器标识外,其实还有个土法……
如果ViewPort那里可以设置为设备宽度的话,其实可以考虑直接判断窗口的宽度…………