Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

chicote

Bootstrap mobile

Recommended Posts

chicote

Boa tarde,

Queria saber a vossa ajuda relativamente à utilização de temas bootstrap.

Será correto utilizar dois layouts diferentes, para mobile e para pc? utilizando display none. Vejam o exemplo em baixo:

 

<div class="para_mobile">
  Mostra conteudo para equipamentos moveis; tablets; smartphones....
</div>

<div class="para_pc">
 	Mostra conteudo para PC's e equipamentos de maior ecrã.... 
</div>

 

<style>
@media only screen and (min-width: 767px) {
  .para_mobile  {
 	 display: none;
  }  
  .para_pc{
 	 estilo....
  }
}
@media only screen and (max-width: 767px) {
  .para_pc  {
  	display: none;
  }
  .para_mobile{
  	estilo....
  }
}
</style>  

Isto é correto fazer?

 

Obrigado

Share this post


Link to post
Share on other sites
bruno1234

O bootstrap tipicamente ajusta os conteúdos ao ecrã através de percentagens.

A tua distinção deve ser apenas para a dimensão do ecrã. Não podes assumir que com essa condição apanhas todos os Android ou iphone ou outro dispositivo.

Não sei ao certo qual é o teu caso, e o que queres mostrar ou esconder, por isso não sei se essa é a melhor forma de fazer. Mas se resultar, é uma opção válida.


Matraquilhos para Android.

Gratuito na Play Store.

https://play.google.com/store/apps/details?id=pt.bca.matraquilhos

Share this post


Link to post
Share on other sites
chicote
1 minuto atrás, bruno1234 disse:

O bootstrap tipicamente ajusta os conteúdos ao ecrã através de percentagens.

A tua distinção deve ser apenas para a dimensão do ecrã. Não podes assumir que com essa condição apanhas todos os Android ou iphone ou outro dispositivo.

Não sei ao certo qual é o teu caso, e o que queres mostrar ou esconder, por isso não sei se essa é a melhor forma de fazer. Mas se resultar, é uma opção válida.

Obg. Pela resposta.

Atraves de percentagem como?

Eu tou a usar um gestor de videos, clipbucket, não se conhece. O template está um caos, e queria fazer dois layouts, um para pc, e outra para equipamentos mobile. Mas assim ja tou com duvidas.

Share this post


Link to post
Share on other sites
bruno1234

Quereres fazer os dois templates é valido, mas provavelmente com bootstrap não precisas repetir tanta coisa.

Vê os exemplos do próprio site: http://getbootstrap.com/getting-started/#examples

Se reparares tem umas classes col-sm-... e col-md-..., ... que fazem o calculo da percentagem dos conteúdos, e é isso que faz com que se redimensione nos vários dispositivos.

Isto deve ser suficiente para a maioria do conteúdo, claro que depois pode haver mais algum ajuste especifico e nesse caso já podes recorrer à tua ideia.

Resumindo: Tenta resolver com o bootstrap a maioria do teu template e conteúdo, o que sobrar faz então as classes especificas.


Matraquilhos para Android.

Gratuito na Play Store.

https://play.google.com/store/apps/details?id=pt.bca.matraquilhos

Share this post


Link to post
Share on other sites
chicote

Sim, mas a ideia também não é fazer tudo. Mas sim algumas separações. Ficaria mais fácil para mim, só não sabia se era correto, até mesmo para SEO, será que não tou a cometer nenhum erro? É essa a minha questão.

Como por exemplo, os menus dropdown, para pc quero aproveitar parte do codigo existente do clipbucket, mas que para mobile, já saem desconfigurados. E dessa forma, parte do header faço como falei.

 

Obrgado.

Share this post


Link to post
Share on other sites
bruno1234

Podes fazer assim como estás a dizer.

Quanto ao SEO, se utilizares as media querys o motor de busca vai perceber que está escondido ou disponível para aquelas resoluções, não me parece que fiques prejudicado. Quanto muito tens resultados diferentes nos vários ecrãs, caso tenhas conteúdo mais ou menos relevante para cada.


Matraquilhos para Android.

Gratuito na Play Store.

https://play.google.com/store/apps/details?id=pt.bca.matraquilhos

Share this post


Link to post
Share on other sites
chicote
3 minutos atrás, bruno1234 disse:

Podes fazer assim como estás a dizer.

Quanto ao SEO, se utilizares as media querys o motor de busca vai perceber que está escondido ou disponível para aquelas resoluções, não me parece que fiques prejudicado. Quanto muito tens resultados diferentes nos vários ecrãs, caso tenhas conteúdo mais ou menos relevante para cada.


O conteudo basicamente será o mesmo. Apresentado de forma diferente.

 

Abraço.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.