Incorrectly applied width media queries on mobile devices

Asked

Viewed 273 times

4

I’m trying to use media queries on a website thinking about mobile devices, but I’m facing a problem: although the rules specify what to do when the width is small - and the same apply correctly when you see it on a browser with the size of the window reduced - on mobile devices it is presented with a somewhat larger width, getting tiny on the screen. Since I have no experience developing for this media, I don’t 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 shows/hides some elements depending on the size of the screen. But the problem is not the rules themselves, but the fact that they are not being followed: when viewed on a mobile device (e.g., Galaxy S4), or even in the simulation of a mobile device (Chrome developer tools), all rules are activated, although I know the width of the screen should be 360px.

The link to the website is that. Note that, seen in a browser common, resizing the window makes the wall narrower and higher (expected and achieved behavior).

My suspicion is that something in the header is "forcing" the width to be greater than it needs to be. The header is a common list using flexbox - as far as I know is well supported on major mobile devices. In the browser items change lines normally when window is narrow (flex-flow: row wrap) - better in Firefox than in Chrome - but on 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 the 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 is missing from the CSS above, please see on the full site (I was not the one who made this header, when reviewing only found the above rules [potentially] relevant, the others only change color or things like that). I didn’t notice anything unusual in the developer tools, the rules are being applied and everything - only the width is in 964 pixels and I don’t understand why.

P.S. I also thought it was something related to device pixel ratio, but from what I understand of that post the viewport should continue to have 360px content, I am wrong?

css media-queries mobile

3 answers

1


Please check that your html contains the following tag inside your<head>:

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

This tag is important because without it your mobile device will ignore the media queries and resize the content of your site.

  • 1

    It worked, thank you! I was totally lost on that...

  • Good thing it was simple. Your media queries were too right to be a problem in CSS.

0

You can use @viewport within a media query to determine the size of the view at a given resolution. Example:

@media all and (min-width: 540px) {
    @viewport {
          width: 480px;
    }
}

That way, when the screen size is at least 540px, the screen will behave as if the total size were 480px.

Link: http://tableless.com.br/manipulando-metatag-viewport/

  • The problem is that the 860px media query is being activated even on a 360px device... Anyway, I’ll try your suggestion, if I succeed I’ll post here again.

0

Try replacing min-width with max-width in your css. If it doesn’t work, do a test, force by placing an ! Mportant after the rule. Example:

@media screen and (max-width: 540px) {
    .parede { width: 530px !important; }
    
}

  • I think you don’t understand, the problem is not with the rules, they are ok, the problem is that in mobile the viewport is being "forced" to get bigger I don’t know why (which causes rules that should only be activated on large screens to be activated, even if the device only has 360 pixels of useful area). As in the suggestion of Gabriel (that did not work, as I expected), I will test yours also by way of doubts, as soon as I can, and if successful I give a feedback.

Browser other questions tagged css media-queries mobile

You are not signed in. Login or sign up in order to post.