Je suis en train de construire un petit projet et j'ai déjà beaucoup de réponses ici, alors merci d'avance.Étiquette d'ancrage ne fonctionnant pas sur téléphone portable
Mon problème maintenant consiste à faire fonctionner les balises d'ancrage sur les appareils mobiles. Les balises d'ancrage semblent fonctionner correctement sur les appareils de bureau, mais lorsque j'essaie de les cliquer sur un iPhone, je n'obtiens aucun résultat.
EDIT: Expliquer mieux (merci Andrei Gheorghiu pour les conseils): Si j'ouvre le codepen sur un appareil comme mon ordinateur de bureau, la barre de navigation fonctionne comme prévu: il s'effondre lorsqu'il atteint les requêtes @media points d'arrêt, et lors de l'effondrement avec largeur < 768, la barre de navigation réduite affiche l'icône toggler et toutes les balises d'ancrage sont cliquables et fonctionnent (elles me redirigent vers la div comme devrait le JavaScript). Lorsque je charge la page sur mon iPhone 7, la barre de navigation est réduite comme prévu, mais cliquer sur les balises d'ancrage ne m'amène nulle part.
J'ai essayé les deux suggestions d'Andrei Gheorghiu mais elles n'ont pas résolu le problème, au moins sur mon téléphone (merci beaucoup, quand même!). Je pense vraiment que le problème est lié à la balise d'ancrage, car supprimer le javascript traitant du défilement et lier directement les balises d'ancrage hrefs avec des ID simples ne fonctionnait pas non plus.
Une aide? J'utilise bootstrap 4, le codepen est ici: 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;
});
Comment répondre à cette question? –