Якорная метка не работает на мобильных устройствах ⇐ Jquery

[Anonymous]

Я строю небольшой проект, и у меня здесь уже много ответов, так что заранее спасибо. /> Изменить: лучшее объяснение (спасибо, Андрей Георгию за советы):
Если я открою Codepen на устройстве, подобном моему настольному компьютеру, Navbar работает, как и ожидалось: он рушится, когда он достигает @media Queries, и при складывании с шириной

Я попробовал оба предложения Андрея Георгиу, но они не решили проблему, по крайней мере, на моем телефоне (большое спасибо, все еще!). Я действительно думаю, что проблема связана с якорной тегом, так как удаление JavaScript, посвященное прокрутке и связыванию якоря, непосредственно с простыми идентификаторами. https://codepen.io/diegomengue/pen/vwwjpj.

html:

• Diego Mengue
• Portfólio
• Contato

< /code>

css: < /p>

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;}
}
< /code>

js: < /p>

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;
});


Подробнее здесь: https://stackoverflow.com/questions/446 ... -on-mobile