Javascript 如何防止脚本在移动设备上运行?
我的网站有一个粘性导航,但它在移动设备上不起作用 如何在移动设备上使其粘性,或者如何防止其粘性(当然,在保持导航的同时) 我到处寻找答案,但没有找到一个有效的答案(并且没有禁用我的导航:),非常感谢您的帮助 这是我的index.html标题的一部分:Javascript 如何防止脚本在移动设备上运行?,javascript,iphone,ipad,mobile,Javascript,Iphone,Ipad,Mobile,我的网站有一个粘性导航,但它在移动设备上不起作用 如何在移动设备上使其粘性,或者如何防止其粘性(当然,在保持导航的同时) 我到处寻找答案,但没有找到一个有效的答案(并且没有禁用我的导航:),非常感谢您的帮助 这是我的index.html标题的一部分: <head> <link href="css/reset.css" rel="stylesheet" type="text/css" /> <link href="css/960.css" rel="styleshe
<head>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/960.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js/smooth-scroll.js" type="text/javascript"></script>
<script src="js/jquery.sticky.js" type="text/javascript"></script>
<script src="contactform.js" type="text/javascript"></script>
<!-- sticky nav -->
<script type="text/javascript">
$(window).load(function(){
$("nav").sticky({ topSpacing: 0, className: 'sticky', center: true });
});
</script>
</head>
$(窗口)。加载(函数(){
$(“nav”).sticky({topspace:0,className:'sticky',center:true});
});
这是jquery.sticky javascript中的代码:
(function($) {
var defaults = {
topSpacing: 0,
bottomSpacing: 0,
className: 'is-sticky',
center: false
},
$window = $(window),
$document = $(document),
sticked = [],
windowHeight = $window.height(),
scroller = function() {
var scrollTop = $window.scrollTop(),
documentHeight = $document.height(),
dwh = documentHeight - windowHeight,
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
for (var i = 0; i < sticked.length; i++) {
var s = sticked[i],
elementTop = s.stickyWrapper.offset().top,
etse = elementTop - s.topSpacing - extra;
if (scrollTop <= etse) {
if (s.currentTop !== null) {
s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
s.currentTop = null;
}
}
else {
var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
if (newTop < 0) {
newTop = newTop + s.topSpacing;
} else {
newTop = s.topSpacing;
}
if (s.currentTop != newTop) {
s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
s.currentTop = newTop;
}
}
}
},
resizer = function() {
windowHeight = $window.height();
};
// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
if (window.addEventListener) {
window.addEventListener('scroll', scroller, false);
window.addEventListener('resize', resizer, false);
} else if (window.attachEvent) {
window.attachEvent('onscroll', scroller);
window.attachEvent('onresize', resizer);
}
$.fn.sticky = function(options) {
var o = $.extend(defaults, options);
return this.each(function() {
var stickyElement = $(this);
if (o.center)
var centerElement = "margin-left:auto;margin-right:auto;";
stickyId = stickyElement.attr('id');
stickyElement
.wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
.css('width', stickyElement.width());
var elementHeight = stickyElement.outerHeight(),
stickyWrapper = stickyElement.parent();
stickyWrapper
.css('width', stickyElement.outerWidth())
.css('height', elementHeight)
.css('clear', stickyElement.css('clear'));
sticked.push({
topSpacing: o.topSpacing,
bottomSpacing: o.bottomSpacing,
stickyElement: stickyElement,
currentTop: null,
stickyWrapper: stickyWrapper,
elementHeight: elementHeight,
className: o.className
});
});
};
})(jQuery);
(函数($){
var默认值={
上间距:0,
底部间距:0,
类名:“是粘性的”,
中锋:错
},
$window=$(window),
$document=$(文档),
粘贴=[],
windowHeight=$window.height(),
scroller=函数(){
var scrollTop=$window.scrollTop(),
documentHeight=$document.height(),
dwh=文档高度-窗口高度,
额外=(scrollTop>dwh)?dwh-scrollTop:0;
对于(变量i=0;i 如果(scrollTop您应该检查用户是否正在使用移动浏览器。如果是,请不要执行sticky plugin方法
<!-- sticky nav -->
<script type="text/javascript">
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i) ? true : false;
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i) ? true : false;
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i) ? true : false;
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
}
};
$(function(){
if(! isMobile.any()){
$("nav").sticky({ topSpacing: 0, className: 'sticky', center: true });
}
});
</script>
var isMobile={
Android:function(){
返回navigator.userAgent.match(/Android/i)?true:false;
},
黑莓:函数(){
返回navigator.userAgent.match(/BlackBerry/i)?true:false;
},
iOS:function(){
return navigator.userAgent.match(/iPhone | iPad | iPod/i)?true:false;
},
Windows:function(){
返回navigator.userAgent.match(/IEMobile/i)?true:false;
},
any:function(){
返回(isMobile.Android()| | isMobile.BlackBerry()| | isMobile.iOS()| | isMobile.Windows());
}
};
$(函数(){
如果(!isMobile.any()){
$(“nav”).sticky({topspace:0,className:'sticky',center:true});
}
});
用户代理检测代码在此借用避免读取用户代理字符串,因为它可能被篡改或伪造。使用该代码可测试用户环境具体支持哪些功能,特别是触摸功能:if(modernizer.touch)
根据您的需要:
<head>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/960.css" rel="stylesheet" type="text/css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js/smooth-scroll.js" type="text/javascript"></script>
<script src="js/jquery.sticky.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js" type="text/javascript"></script>
<script src="contactform.js" type="text/javascript"></script>
<!-- sticky nav -->
<script type="text/javascript">
$(window).load(function(){
if (Modernizr.touch) {
$("nav").sticky({ topSpacing: 0, className: 'sticky', center: true });
}
});
</script>
</head>
$(窗口)。加载(函数(){
if(现代化触摸屏){
$(“nav”).sticky({topspace:0,className:'sticky',center:true});
}
});
我认为一个好的解决方案是只检查屏幕或视口大小。这绝不是检查移动设备,但在小屏幕/视口上取消导航似乎很合理。我不是小屏幕上页面最重要的部分,而是网站内容。粘性导航并不那么重要
检查特定的平台或设备非常困难,我不建议这样做。如果用户在win8平板电脑上看到你的站点,你还需要那个粘性导航吗
将以下内容添加到
中,让移动设备知道您网站内容的宽度(将960更改为您拥有的任何宽度):
用户代理嗅探通常是一个坏主意,而功能检测则更好。当然,这需要了解该功能不起作用的原因,并将其修复到移动设备上,或者设计一个测试来检测缺失的功能,使其不起作用。我完全同意你@jfriend00:)你是否假设有支持“触摸”的设备是移动设备吗?基本上,因为浏览器需要触发正确的触摸事件。即使您有带有IE9或FF15等的触摸显示器,您也无法从这些浏览器中获取任何触摸事件。但是,移动浏览器确实会触发这些事件。是的,非常正确。:)我认为最好在脚本中添加一个浏览器大小检查机制,使解决方案接近零缺陷。@ArashMilani:您的解决方案不会导致视网膜设备出现问题吗?具有非常高的分辨率?它们也是移动的……感谢您的输入!@Stefaan我认为“spadar shut”这一点很好。我只是复制这里作为参考:“不,clientWidth报告CSS像素,而不是设备像素。retina iphone仍然报告其尺寸为320x480 px(当您将viewport设置为设备宽度时)。”这不会给具有极高分辨率的视网膜设备带来问题吗?它们也是可移动的……感谢您的输入!不,clientWidth报告CSS像素,而不是设备像素。视网膜iphone仍然报告其尺寸为320x480 px(当您将viewport设置为设备宽度时)。谢谢!我插入了meta标记并调整了头部的javascript,如下所示,但它也禁用了桌面上的粘性导航…有什么想法吗?if(document.documentElement.clientWidth>640){$(“nav”).sticky({topspace:0,className:'sticky',center:true});}
当文档
未定义时,或者浏览器窗口的视口小于640px时,您可能过早地运行脚本。您应该将代码添加到放置所有初始化逻辑的位置。它应该看起来像$(function(){/*code here*/})
工作且最简单。你用最简单的方式拯救了我的屁股!@CarlosO让我说我不想运行这样的脚本==>我如何将代码附加到那里。你能从技术角度解释一下这是如何工作的吗?我从来没有见过这样的语法。同样的答案有这个。请相信原作者 ;)
<meta name="viewport" content="width=960px, initial-scale=1">
if (document.documentElement.clientWidth > 640 ) {
$("nav").sticky({ topSpacing: 0, className: 'sticky', center: true });
}
function isMobile() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
if (!isMobile()) {
//place script you don't want to run on mobile here
}