title: Anchor tag not working on mobile
body: <p>I'm building a small project and I've got a lot of answers here already, so thank you in advance.</p>
  
  <p>My problem now is getting the anchor tags to work on mobile devices.
  The anchor tags seems to work fine on desktop devices but when I try to click them on an iPhone I get no results.</p>
  
  <hr>
  
  <p>EDIT: Explaining better (thank you Andrei Gheorghiu for the advice): 
  If I open the codepen on a device like my desktop computer, the navbar works as expected: it collapses as it reaches the @media queries breakpoints, and upon collapsing with width &lt; 768, the collapsed navbar shows the toggler icon and all the anchor tags are clickable and working (they redirect me to the div as the JavaScript should).
  When I load the page on my iPhone 7, however, the navbar is collapsed as expected, but clicking on the anchor tags doesn't get me anywhere. </p>
  
  <p>I tried Andrei Gheorghiu's both suggestions but they didn't solve the problem, at least on my phone (thank you very much, still!). I really think the problem is related to the anchor tag, as removing the javascript dealing with the scrolling and linking the anchor tags hrefs directly with simple IDs didn't work either.</p>
  
  <hr>
  
  <p>Any help?
  I'm using bootstrap 4, the codepen is here: <a href="https://codepen.io/diegomengue/pen/VWWjpj" rel="nofollow noreferrer">https://codepen.io/diegomengue/pen/VWWjpj</a>.</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;/head&gt;
  
  &lt;body&gt; 
    &lt;nav class='navbar navbar-inverse navbar-toggleable-sm mx-auto sticky-top'&gt;
      &lt;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"&gt;
      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
        &lt;div class="navbar-collapse collapse" id="navbarNav"&gt;
      &lt;ul class='navbar-nav mx-auto'&gt;
        &lt;li class='nav-item mx-auto'&gt;&lt;a href='#' id='inicioMenu' class='nav-link'&gt;&lt;strong&gt;Diego Mengue&lt;/strong&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li class='nav-item mx-auto'&gt;&lt;a href='#' id='portfolioMenu' class='nav-link'&gt;Portfólio&lt;/a&gt;&lt;/li&gt;
        &lt;li class='nav-item mx-auto'&gt;&lt;a href='#' id='contatoMenu' class='nav-link'&gt;Contato&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;         
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>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></pre>
  
  <p>JS:</p>
  
  <pre><code>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;
  });
  </code></pre>