Display Div Only in Mobile Version

Navigation
0

I have a question and I think other people may also have the same doubt ...

Let's go to the situation: I have a website, with a header edited to appear on computer screens (resolutions higher than tablets) but I would like the header to change when the site is accessed by a cell phone or tablet.

Example: I have a LOGO1280x720.PNG and would like the Logo320X70.PNG to appear when accessed by the mobile version.

I know how to hide a div at a lower resolution, but what about displaying a div in mobile version as it does?

obs: The site itself is already responsive 

        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />

In short: I NEED A DIV SUM AND ANOTHER APPEARS IN MOBILE AND A DIV SUM AND ANOTHER APPEARS IN DESKTOP VERSION

Edit @ 2: I put it like this in HTML: 

                    <div class="logopngdesktop"><h1 id="logo"><a href="#">Recarga de Toner e Cartuchos, Manutenção de Impressoras</a></h1></div>
            <div class="logopngmobile"><h1 id="logo"><a href="#">Recarga de Toner e Cartuchos, Manutenção de Impressoras</a></h1></div>

And so in CSS: 

                    @media only screen and (max-width: 400px) { .logopngdesktop{ display: none !important; } } @media only screen and (min-width: 601px) { .logopngmobile { display: none !important; } }

It disappears in the Mobile version but the part where it was to appear in the mobile version does not work. What can I be wrong?

  

SOLUTION:

Problem solved, I want to leave the resolution here for everyone who has the same problem:

Html: 

   <!-- aparecer no desktop -->  
            <div class="mobile-hide"><h1 id="logo"><a href="#">Recarga de Toner e Cartuchos, Manutenção de Impressoras</a></h1></div>
      <!-- aparecer no mobile -->  
            <div class="mobile"><div class="desktop-hide"><h1 class="logomobile"><a href="#">Recarga de Toner e Cartuchos, Manutenção de Impressoras</a></h1></div></div>

Css: 

    @media only screen and (max-width: 400px) {
    .mobile-hide{ display: none !important; }
    }
    @media only screen and (max-width: 400px) {
    .mobile{ display: inline !important; }
    }
    @media only screen and (min-width: 500px) {
    .desktop-hide{ display: none !important; }
    }

Thanks to all who tried to help!

    
asked by anonymous 10.03.2016 / 14:21

2 answers

3

You can use JavaScript, or media queries from CSS (which is most appropriate for this).

In your CSS, apply the rule: 

@media screen and (max-width: 380px) {
    #divMobile {
        //Aqui você aplica as regras pra div com ID divMobile. Essas regras serão aplicadas somente caso a tela do usuário tenha no máximo 380px. Isso você pode modificar na regra cima.
    }
}

You can also use other parameters, there are many. You can for example, instead of specifying the maximum screen size for that rule to apply, enter the minimum size. 

@media screen and (min-width: 380px) {
    #divMobile {
         //propriedades css
    }
}

There are other parameters, such as hight.

You can also add more elements within a single media query. This goes beyond your need.

With this you can, for example, define that a div X will stay with display: none; for screens larger than X width, or vice versa.

I recommend reading this article.

    
10.03.2016 / 14:30
1

Here is a function you might be using: 

function verifica_device() {

    $android = strpos($_SERVER['HTTP_USER_AGENT'], "Android");
    $palmpre = strpos($_SERVER['HTTP_USER_AGENT'], "webOS");
    $berry = strpos($_SERVER['HTTP_USER_AGENT'], "BlackBerry");
    $ipod = strpos($_SERVER['HTTP_USER_AGENT'], "iPod");
    $ipad = strpos($_SERVER['HTTP_USER_AGENT'], "iPad");
    $iphone = strpos($_SERVER['HTTP_USER_AGENT'], "iPhone");
    $WinPhone8 = strpos($_SERVER['HTTP_USER_AGENT'], "Windows Phone 8.0");
    $WinPhone81 = strpos($_SERVER['HTTP_USER_AGENT'], "Windows Phone 8.1");
    $WinPhone7 = strpos($_SERVER['HTTP_USER_AGENT'], "Windows Phone OS 7.5");

    if ($android || $palmpre || $ipod || $ipad || $iphone || $WinPhone8 || $WinPhone81 || $WinPhone7 || $berry == true):

        return 1;

    else:

        return 0;

    endif;
}

You can use the Bootstrap responsiveness options, see? They're great!

Follow this link: link

I also use this method: 

<?php
    define('MOBILE', 'visible-sm visible-xs');
    define('DESKTOP', 'hidden-sm hidden-xs');
?>

So in the divs I want mobile or desktop I only do this: class="<?php echo DESKTOP ?>" or vice versa. I hope I have helped!

Edition: 

  • $(window).load(function () {
    tamanhos_site_mobile();
});
$(window).resize(function () {
    tamanhos_site_mobile();
});

function tamanhos_site_mobile() {
    var altura_tela = $(window).height();
    var largura_tela = $(window).width();
    if ((altura_tela > 750) || (largura_tela > 991)) {
        var tamanho_div_exemplo = $('#div_id').height();
        $('.classe_aplicar').css('height', tamanho_div_exemplo );
};
        
    • 10.03.2016 / 14:32
    JavaScript / jQuery Methods While - Returns only one record