Anchor tag not working on mobile

我正在建設一個小項目，我已經在這裏得到了很多答案，所以提前謝謝。Anchor tag not working on mobile

我現在的問題是讓錨標籤在移動設備上工作。錨定標籤似乎在桌面設備上正常工作，但是當我嘗試在iPhone上單擊它們時，我得不到任何結果。

編輯：解釋更好（謝謝你，安德烈·喬治烏的意見）：如果我打開設備上的codepen像我的臺式電腦，導航欄按預期工作：它崩潰，因爲它達到了@media查詢斷點，當寬度爲< 768時，合攏的導航欄顯示觸發器圖標，並且所有的定位標記都是可點擊的並且可以工作（它們將我重定向到JavaScript應該的div）。但是，當我在我的iPhone 7上加載頁面時，導航欄按預期摺疊，但單擊定位標記不會讓我到任何地方。

我嘗試了Andrei Gheorghiu的兩個建議，但他們並沒有解決問題，至少在我的手機上（非常感謝你，還是！）。我真的認爲這個問題與錨標籤有關，因爲移除處理滾動的JavaScript並直接使用簡單ID鏈接錨標籤hrefs也不起作用。

任何幫助？我使用bootstrap 4，codepen在這裏：https://codepen.io/diegomengue/pen/VWWjpj。

HTML：

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

<body> 
    <nav class='navbar navbar-inverse navbar-toggleable-sm mx-auto sticky-top'> 
    <button class="navbar-toggler collapsed mx-auto" type="button" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false" aria-controls="navbarNav" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
     <div class="navbar-collapse collapse" id="navbarNav"> 
    <ul class='navbar-nav mx-auto'> 
     <li class='nav-item mx-auto'><a href='#' id='inicioMenu' class='nav-link'><strong>Diego Mengue</strong></a></li> 
     <li class='nav-item mx-auto'><a href='#' id='portfolioMenu' class='nav-link'>Portfólio</a></li> 
     <li class='nav-item mx-auto'><a href='#' id='contatoMenu' class='nav-link'>Contato</a></li> 
    </ul> 
    </div> 
    </nav>   
</body>

CSS：

body { 
    background-color: #EAEDFB; 
    color: white; 
    font-size: 20px; 


.navbar{ 
    background-color: #6F7ECC; 
    top: 0.5em; 
    width: 74%; 
} 

li { 
    padding: 0.3em 0.3em 0.3em 0.3em; 
    margin: 0 0.3em 0 0.3em; 
} 

a { 
    color: white; 
    pointer-events: auto; 
} 

a:link { 
    color: white; 
    text-decoration: none; 
} 

a:visited { 
    color: white; 
    text-decoration: none; 
} 

a:hover { 
    color: #D9DDF3; 
    text-decoration: none; 
} 
a:active { 
    color: white; 
    text-decoration: none; 
} 

form { 
    margin-bottom: 0.5em; 
} 

h1 { 
    font-size: 3em; 
} 

h2 { 
    font-size: 2.5em; 
} 
h4 { 
    font-size: 1.5em; 
} 

h5 { 
    font-size: 1.5em; 
    margin-bottom: 0.5em; 
} 

p { 
    font-size: 1em; 
} 

.vertical-align { 
    display: flex; 
    align-items: center; 
} 

#icone { 
    width: 2.5em; 
    margin: 0 0.6em 0 0.6em; 
} 

hr { 
    background-color: white; 
} 

h1, h2 { 
    margin-top: 0.5em; 
    margin-bottom: 0.5em; 
} 
#divPortfolio { 
    height: 800px; 
} 

.text-right { 
    margin-right: 0.3em; 
} 

footer { 
    background-color:#6F7ECC; 
    width: 74%; 
    text-align: center; 
} 

::-webkit-input-placeholder { 
    font-size: 1em!important; 
} 

:-moz-placeholder { /* Firefox 18- */ 
     font-size: 1em!important; 
} 
::-moz-placeholder { /* Firefox 19+ */ 
     font-size: 1em!important; 
} 

@media screen and (min-width: 0px) { 
    body {font-size: 10px;} 
    .navbar {font-size:1.2em;} 
    footer {font-size: 0.6em; height: 5em; padding-top: 1.4em;} 
    h4 {margin-top: 1em;} 
} 

@media screen and (min-width: 768px) { 
    body {font-size: 13px;} 
    .navbar {font-size: 1.2em;} 
    footer {font-size: 1em; height: 3em; 
    padding-top: 1.4em;} 
    h4 {margin-top: 0em;} 
    } 

@media screen and (min-width: 992px) { 
    body {font-size: 14px;} 
} 

@media screen and (min-width: 1200px) { 
    body {font-size: 16px;} 
}

JS：

var mq = window.matchMedia("(min-width: 768px)"); 

function scrollToAnchor(aid){ 
    var aTag = $(aid); 
    if (mq.matches) { 
    $('body').animate({scrollTop: (aTag.offset().top)-82},'slow'); 
    } else { 
    $('body').animate({scrollTop:(aTag.offset().top)-180},'slow'); 
    } 
}; 

    $("#inicioMenu").on('click touchend', function(e) { 
    e.preventDefault(); 
    scrollToAnchor("#inicio"); 
    return false; 
}); 

$("#portfolioMenu").on('click touchend', function(e) { 
    e.preventDefault(); 
    scrollToAnchor('#portfolio'); 
    return false; 
}); 

$("#contatoMenu").on('click touchend', function(e) { 
    e.preventDefault(); 
    scrollToAnchor('#contato'); 
    return false; 
});

來源

2017-06-21 Diego Mengue

我該如何解決這個問題？ –

你似乎沒有加載tether(.min).js，這是由引導4必需的，應該之前加載bootstrap(.min).js。始終從Bootstrap webpage獲得最新版本（在易於入門）。這很可能會解決您的問題，如果確實如此，則不要採取下一步措施。

如果沒有，請記住IoS是特殊的。真的很特別。長話短說，您可能還需要將click功能映射到touchend事件。

更換按照這個模型的click()每次出現...

$("#inicioMenu").on('click touchend', function(e) { 
    e.preventDefault(); 
    scrollToAnchor("#inicio"); 
    return false; 
});

...會，最有可能的，解決它。最重要的部分是preventDefault()，它修復了某些版本的IoS設備上的scrollTop問題。

此外，請確保您沒有將pointer-events:none;設置爲您的<a>標籤（因爲它會在IoS上禁用它們）。

你應該注意你提供的代碼段不是Minimal, Complete and Verifiable Example（它不會重現問題）。如果上述一般建議不起作用，則需要用可驗證的示例更新您的問題（或者更多關於您正在測試的設備的技術信息），以便找出原因。

來源

2017-06-21 22:10:30

謝謝你的幫助！我嘗試了你的建議，但遺憾的是他們沒有爲我工作（假設我沒有做錯什麼）。我更新了代碼（切換click（）部分並添加了tether.js），問題依然存在。 –

Anchor tag not working on mobile

回答

相關問題