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?
-
Neste caso voce vai ter que suar javascript para alterar a classe do elemento.– RFLCommented 15/12/2015 às 15:26
Adicione um comentário
|
1 Resposta
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.
-
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