我已经处理了几个小时,但找不到解决方案。
我需要在屏幕尺寸为 <1000px(iPad 垂直方向)时调用一个函数,并在屏幕尺寸> 1000px(iPad 横向)时注释/停用该函数。
我写了以下代码,它运行良好,但是当我旋转iPad(从垂直到横向)时,该功能没有按预期进行注释。
解释起来相当复杂。希望你能理解我的问题。
$(window).ready(function(){
if ( $(window).width() > 1000) {
/* $( '.head_bar_nav ul:has(li)' ).doubleTapToGo(); */
}
else {
$( '.head_bar_nav ul:has(li)' ).doubleTapToGo();
}
});
$(window).resize(function(){
if ( $(window).width() > 1000) {
/* $( '.head_bar_nav ul:has(li)' ).doubleTapToGo(); */
}
else {
$( '.head_bar_nav ul:has(li)' ).doubleTapToGo();
}
});
祝你有美好的一天,再见!
你的意思是你想禁用DoubleTapToGo,如果宽度>1000px?
你用过这个代码吗?那么我认为这是不可能的。您只能启用它。
--编辑--
好的,我对 doubletaptogo.js 文件进行了一个小改动。你可以在这里找到它。
现在要达到所需的效果,请执行以下操作:
$(window).resize(function() {
if ( $(window).width() > 1000) {
$( '.head_bar_nav ul:has(li)' ).data("doubletaptogo-enabled", false);
}
else {
$( '.head_bar_nav ul:has(li)' ).data("doubletaptogo-enabled", true);
}
});
$(document).ready(function(){
$( '.head_bar_nav ul:has(li)' )
.data("doubletaptogo-enabled", ($(window).width() <= 1000))
.doubleTapToGo();
});
尚未测试它,但它应该可以工作。
您可以使用window.matchMedia
,然后使用媒体查询来定位当前方向:
if (window.matchMedia("(orientation: landscape)") {
// ...
}
更多信息:https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia
在您提供的代码片段中:
$(window).ready(function(){
if (window.matchMedia("(orientation: landscape)") {
/* $( '.head_bar_nav ul:has(li)' ).doubleTapToGo(); */
}
else {
$( '.head_bar_nav ul:has(li)' ).doubleTapToGo();
}
});
$(window).resize(function(){
if (window.matchMedia("(orientation: landscape)") {
/* $( '.head_bar_nav ul:has(li)' ).doubleTapToGo(); */
}
else {
$( '.head_bar_nav ul:has(li)' ).doubleTapToGo();
}
});
还可以使用媒体查询来定位device-width
但如果要定位方向,最好使用 orientation
表达式。
大卫·沃尔什(David Walsh)还有一篇关于识别方向变化的精彩博客文章:http://davidwalsh.name/orientation-change