Os sites que estou desenvolvendo vem apresentado alguns problemas. Acredito que é por causa da minha inexperiência em páginas mobile - responsivas.
Eu faço meus sites em Mobile First. E para testar o site eu uso o simulador do Chrome para aparelhos portáteis, no Inspect Element.
Para fazer os estilos CSS utilizo um programa chamado CodeKit. Como eu faço geralmente meus estilos em LESS, esse programa pré processa o código. E nele tem algumas opções para aquele estilo funcionar em vários navegadores.
Então, por exemplo, se eu digito no LESS:
transform: scale(0);
Na compilação vai retornar:
transform: scale(0)
-webkit-trasnform: scale(0)
-moz-transform: scale(0)
Enfim, vocês entenderam. Ele já converte o código para funcionar em outros navegadores que não tem suporte para tal propriedade CSS.
Daí o que acontece:
Eu coloquei um h1
no site para ficar em duas linhas. O título tem 4 palavras, então ficaria duas na primeira e duas na segunda linha, visto que determinei um width:70%
em uma screen de 320px;
, ou seja, um iPhone 4.
Daí no simulador fica certo. Mas quando abro no iPhone fica em três linhas. Duas em cima, uma no meio e uma embaixo.
E isso acontece com padding
também. Tem elemento que dou um padding:10px;
. No simulador funciona, mas no iPhone não funciona o padding
em algum dos cantos. Parece que não tem espaço para aquele elemento dar padding
.
Não sei porquê isso acontece. Alguns dos problemas resolvi usando essa meta-tag
:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
E no arquivo CSS coloco assim:
<link media="all" type="text/css" rel="stylesheet" href="css/main.css">
.
1 - Por que acontece esses problemas ?
2 - É normal ?
3 - Tenho que ir adaptando ? Tamanho de fonte, tamanho de elementos, espaços ?