Bootstrap mobile

[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

[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.

[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.

[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.

[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.

[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.

[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.