1

Tenho uma dúvida e acho que outras pessoas também podem ter essa mesma dúvida...

Vamos a situação: Tenho um site, com header editado para aparecer em telas de computador (resoluções maiores que de tablets) porém gostaria que ao acessar o site por um celular ou tablet o header mudasse.

Exemplo: Tenho um LOGO1280x720.PNG e gostaria que o Logo320X70.PNG aparece quando acessado pela versão mobile.

Sei como fazer para esconder uma div em resolução menor, mas e para exibir uma div em versão mobile como faz?

obs: O site em si, já é responsivo

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

Resumindo: PRECISO QUE UMA DIV SUMA E OUTRA APARECE EM MOBILE E UMA DIV SUMA E OUTRA APARECE EM VERSÃO DESKTOP

Edit@2: Coloquei assim no 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>

E assim no CSS:

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

Ela some na versão Mobile porém a parte em que era pra aparecer na versão mobile não funciona. O que posso estar errando?

SOLUÇÃO:

Problema resolvido, quero deixar aqui a resolução para todos que tenham o mesmo problema:

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; }
    }

Agradeço a todos que tentaram ajudar!

2 Respostas 2

5

Você pode usar JavaScript, ou media querys do CSS (que é o mais apropriado para isso).

No seu CSS, aplique a regra:

@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.
    }
}

Também é possível usar outros parametros, são muitos. Você pode por exemplo, invés de especificar o tamanho máximo da tela para que aquela regra seja aplicada, informar o tamanho mínimo.

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

Existem outros parametros, como por exemplo o hight.

Você também pode adicionar mais elementos dentro de uma única media query. Isso vai da sua necessidade.

Com isso você pode, por exemplo, definir que uma div X irá ficar com display: none; para telas maiores que X width, ou vice-versa.

Recomendo a leitura deste artigo.

6
  • Funcionou porém, não tem como eu fazer assim: div1 aparece em mobile some em desktop > div2 aparece em desktop e some em mobile ? Desculpe, sou leigo no assunto... Commented 10/03/2016 às 13:41
  • @VictorGomes, as media querys tomam como base o tamanho da tela. Antigamente, eu ACHO, que existia um parâmetro que identificava o dispositivo, mas foi descontinuado. Pra identificar o dispositivo que o usuário está utilizando, você terá que recorrer a outras ferramentas. A resposta do Maurício parece responder bem essa questão. Commented 10/03/2016 às 13:45
  • o problema não é saber o dispositivo, pode ser por resolução, mas como eu faria uma div aparecer, e sumir e outra sumir e aparecer ? Commented 10/03/2016 às 13:57
  • Qual a resolução do mobile? Vamos tomar como base 320px. @media screen and (min-width: 320px) { #div1 { display: inline; } #div2 { display: none; } } e fora da media query você define: #div1 { display: none; } #div2 { display: inline; } Commented 10/03/2016 às 14:04
  • Tomando como base o principio da especificidade aplicada ao CSS que diz que as regras que forem mais especificas, tem maior prioridade, você irá conseguir o que quer usando o código acima e, fazendo as devidas alterações pro seu projeto, é claro. Commented 10/03/2016 às 14:05
1

Segue uma função que você pode estar utilizando:

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;
}

Você pode utilizar as opções de responsividade do Bootstrap, ja viu? São ótimas!

Segue link: http://getbootstrap.com/css/#responsive-utilities

Costumo utilizar também deste método:

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

Então nas divs que quero mobile ou desktop só faço isso: class="<?php echo DESKTOP ?>" ou vice-versa. Espero ter ajudado!

Edição:

Segue opção em jQuery também, ele calcula altura da tela, largura e aplica dependendo do if setado:

$(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 );
};
2
  • Olá, não teria como fazer isso em html? Tentei pelas classes do bootstrap mas não funcionou, continua aparecendo em mobile e eu estou precisando assim: div1 aparece em mobile some em desktop > div2 aparece em desktop e some em mobile Commented 10/03/2016 às 13:40
  • Pelo que verifiquei no css do Bootstrap, ele trabalha também com media screen, ele coloca display none quando chegar em tal resolução, oque você pode fazer além de php, seria em javascript, algo que pega o tamanho da tela e se for menor ou maior que o tamanho desejado, aplica a classe tal. Commented 10/03/2016 às 14:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .