View Div in Mobile Version Only

Question

I have a question and I think other people might have that same question too...

Let’s go: I have a website, with header edited to appear on computer screens (resolutions bigger than tablets) but I would like when accessing the site by a mobile phone or tablet the header change.

Example: I have a Logo1280x720.PNG and would like Logo320x70.PNG to appear when accessed by mobile version.

I know how to hide a div in lower resolution, but and to display 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 SUMA AND ANOTHER APPEARS IN MOBILE AND A DIV SUMA AND ANOTHER APPEARS IN DESKTOP VERSION

Edit@2: 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 supposed to appear in the mobile version does not work. What can I be missing?

SOLUTION:

Problem solved, I want to leave the resolution here for all who have 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; }
    }

I thank everyone who tried to help!

Answer 1

You can use Javascript, or CSS media querys (which is the 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.
    }
}

It is also possible to use other parameters, there are many. You can for example, instead of specifying the maximum screen size for that rule to be applied, 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 from your need.

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

I recommend reading of this article.

Answer 2

Follows a function you may 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, right? They’re great!

Following link: http://getbootstrap.com/css/#Responsive-Utilities

I also use this method:

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

So on Divs I want mobile or desktop only do that: class="<?php echo DESKTOP ?>" or vice versa. I hope I’ve helped!

Editing:

Following option in jQuery too, it calculates screen height, width and applies depending on the set if:

$(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 );
};