Media width queries applied incorrectly on mobile devices

I'm trying to use media queries on a site thinking about mobile devices, but I'm having a problem: although the rules specify what to do when the width is small - and they apply correctly when you see in a browser with the size of the window reduced - on mobile devices it is presented with a somewhat larger width, getting low on the screen. As I have no experience developing for this media, I do not know what I'm doing wrong.

My (simplified) CSS is:

.parede {
    width: 332px;
    margin: 0 auto;
}

.meio2, .meio4, .meio5 {
    display: none; 
}

@media all and (min-width: 540px) {
    .parede { width: 530px; }
    .meio1 { display: none; }
    .meio2 { display: inline-block; }
}

@media all and (min-width: 700px) {
    .parede { width: 690px; }
    .meio3 { display: none; }
    .meio4 { display: inline-block; }
}

@media all and (min-width: 860px) {
    .parede { width: 850px; }
    .meio5 { display: inline-block; }
}

Essentially it changes the size of a div and displays / hides some elements according to the size of the screen. But the problem is not in the rules themselves, but in the fact that they are not being followed: when viewed on a mobile device (eg Galaxy S4), or even on mobile device simulation (Chrome developer tools), all the rules are enabled, although I know the width of the screen should be 360px .

The pro site link is esse . Note that, seen in a common browser , resizing the window causes the wall to become narrower and higher (expected behavior and reached).

My suspicion is that something in the header is "forcing" the width to be larger than it needs to be. The header is a common list using flexbox - which as far as I know is well supported on major mobile devices . In the browser items change line normally when the window is narrow ( flex-flow: row wrap ) - better in Firefox than in Chrome - but in the smartphone everything is on the same line.

    <div class="ajustar todo menu">
        <ul class="flex-container">
            <li class="flex-item">
                <h5>CONTATO: 
                    <a class="fonte_destaque link_limpo"  href="...">...</a> |  
                    <a class="fonte_destaque link_limpo" href="...">...</a>
                </h5>
            </li>
            <li class="flex-item">
                <h5>sobre</h5>
            </li>
            <li class="flex-item">
                <h5>currículo</h5>   
            </li>
            <li class="flex-item">
                <h5>portfolio em pdf</h5>
            </li
        </ul>
    </div>

Part of CSS applicable to the header:

.ajustar {
    overflow: auto;
}

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  flex-flow: row wrap;

  justify-content: space-around;
}

.flex-item {
  padding: 5px;
  margin-top: 10px;
  text-align: center;

  flex-shrink: 0;
}

.todo {
    width: 100%;
}

If something was missing in the CSS above, please see the full site (I did not do this header when reviewing I just found the rules above [potentially] relevant, the others just change color or things like that). I have not noticed anything abnormal in the developer tools, the rules are being applied and everything else - just that the width is in 964 pixels and I do not understand why.

P.S. I also thought it was something related to device pixel ratio , but from what I understood from this post a>