6

Como posso fazer com que um campo de texto em meu HTML fique oculto quando o usuário estiver visualizando pelo celular e apareça quando ele estiver visualizando pelo PC?

1
  • Neste caso voce vai ter que suar javascript para alterar a classe do elemento.
    – RFL
    Commented 15/12/2015 às 15:26

1 Resposta 1

15

Utilize as classes de responsividade do Bootstrap

http://getbootstrap.com/css/#responsive-utilities-classes

No seu caso, utilizar as classes hidden-xs para ocultar algo na resolução mobile e visible-xs para mostrar apenas em resolução mobile.

<div class="hidden-xs">
    Elemento oculto para mobile
</div>
<div class="visible-xs">
    Elemento visível para mobile e oculto nas demais resoluções
</div>

Configuração das resoluções no Twiter Bootstrap

  • lg - Dispositivos grandes (desktops, >= 1200px)
  • md - Dispositivos médios (desktops, >= 992px && < 1200px)
  • sm - Dispositivos pequenos (tablets, >= 768px && < 992px)
  • xs - Dispositivos extra pequenos (smartphones, < 768px)

Poderá combinar os prefixos hidden- ou visible- com qualquer uma das tags de resolução acima.

4
  • Pedro, nesse caso eu tenho que definir a resolução que ele deve ocultar ou existem algum mecanismo que identifica a resolução como sendo de um celular? Commented 15/12/2015 às 15:39
  • @KleberNunes alterei a resposta explicando cada tag. Commented 15/12/2015 às 15:43
  • Cara, se não fosse as frameworks, fazer uma coisa dessa ia ser muuito chato Commented 25/05/2016 às 16:51
  • Também acho mas graças aos frameworks acabei aprendendo mais e ficando independente deles para esses tipos de coisas. Commented 25/05/2016 às 18:21

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 .