Qual o tamanho exato de um layout para dispositivo móvel?

[Plunder 0]

Bom dia,

 

 

Eu sou um fuçador, não sou programador.

Estou com um celular com resolução de 240x320 e um tablet com resolução de 800x480. Adquiridos semana passada.

Fiz o esboço de um layout com 800x480 acreditando que se encaixaria perfeitamente no tablet. Para minha surpresa ficou pequeno no tablet e uma "tirinha" no celular.

Depois de mudar a largura cheguei ao tamanho 960 de largura para preencher de canto a canto, tanto no tablet quanto no celular. Claro que no celular precisa tocar na tela para expandir.

Fiz um subdomínio .c (celular) e .t (tablet) porque achei que poderia criar layout com 240x320 para celulares e 800x480 para tablets. A idéia era que no celular o conteúdo ficasse visível sem a necessidade de tocar na tela para expandir. O mesmo para o tablet.

Existem sites simuladores de resolução, mas após percorrer vários eu percebi que funcionam diferente dos dispositivos móveis. Enquanto no celular (pelo menos o meu) um conteúdo com largura padrão reduza e se encaixe, nos simuladores o layout aparece no tamanho normal, sendo possível apenas visualizar parte do layout.

Em todos os celulares o layout "encolhe" para aparecer todo na tela?

Como eu poderia criar um layout que ficasse visível na tela do celular sem "encolher"?

Estou trabalhando com resolução de largura de 870px porque ficam barras laterais que ajudam no deslizar na vertical. Pensei em desenhar tudo grande. Mas o que eu queria mesmo é saber como criar tabelas com largura entre 240 e 320 mas que se encaixassem na argura do visor.

 

desde já agradeço toda e qualquer ajuda.

 

att,

Marcos Paulo.

 

ps.: já fucei o Google, mas minhas capacidades técnicas são quase nulas. Deem um desconto.

[lokaodomau 61]

Cara, aconselho a usar a dica passada pelo Carlos Coelho, se não estou enganado o link que ele passou, gera códigos para identificar se o navegador é de dispositivos moveis em várias linguagens.

[mau rs 37]

Amigo, pesquise por layout responsivo!

[Anderson Danilo 43]

Isso vária de celular para celular, como acontece nos computadores, e você ainda deve considerar o tablet. Acredito que a melhor solução realmente seja design responsivo, media queries e usar porcentagem quando possível.

 

http://blog.caelum.com.br/flexibilidade-em-paginas-para-dispositivos-moveis-com-media-queries/

[carlosmadeiracunha 3]

Quando vou fazer um layout simples, uso uma div com id "pag" e style width: 100% e height: auto; pra poder fazê-la se expandir por toda a viewport( monitor, tela do tablet ou celular ...) daí dentro desta div eu vou colocando div´s com porcentagens em width .

 

EX:

<div id="pag" style="width:100%; height:auto;">
 
<!--esta div tem 30% dos 100% da div pag -->
<div id="left" style="background-color:#FFFF00;  float:left; width:30%;"> conteúdo da div left que ficará a esquerda da tela</div><!-- div id="left" -->
 
<!-- o mesmo acontece aqui só que ela vai ficar do lado direito da tela -->
<div id="right" style="background-color:#FF0000;  float:right; width:30%;"> conteúdo da div left que ficará a direita da tela</div><!-- div id="right" -->
 
<!-- aqui eu fecho a div pag -->
</div><!-- div id="pag" -->

Coloquei este exemplo só pra você ter uma ideia do que estão falando design responsivo.

Se você copiar o meu código ele vai funcionar, mas recomendo a você estudar sobre design responsivo ou layout responsivo, css e media queries.

 

Aqui tem um tutorial básico que vai te ensinar como funciona HTML + CSS

http://www.maujor.com/w3ctuto/firstcss.html