2

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 ?

1 Resposta 1

-1

Cara tem vários pontos que precisam ser revistos nesse contexto todo. Vamos lá:

  1. Web Responsive não está atrelado totalmente Web Mobile
    Web responsive é você entregar a melhor experiência independente do tipo de acesso do usuário, pontos: Semântica / Acessibilidade / Cenário de Imagens /Progressive Enhancement...

  2. Mobile First é somente uma abordagem
    Fazer teste você necessitaria de um Device Lab, o que é extremamente caro, por isso garante que ele funcione nos principais devices, e comece a testar pelo que você já tem na mão device inspect da sua escolha.

  3. Usar programa para injetar prefixer sendo que você usa pre processor
    Solução simples, tá usando Less, cria um mixin utilitário que faz isso pra você, ou na pior da hipótese cria um snippet no seu editor. Esquece esse codekit modo mamãe, quem pre processa seu .less para .css é o javascript que você linka no arquivo ou você pode configurar um task runner pra fazer a compilação. Pra te ajudar. Mixins utilitário full pronto, copy paste

  4. Breakpoints com media queries
    Comece a injetar onde seu layout quebre, não saia fazendo media queries para tudo tenha um ponto de partida com base estratégica.

  5. Viewport essa é a palavra chave
    Não adianta você colocar somente a meta tag e acha que ela é mágica, você precisa saber o que é a viewport, você que diz para ele através do atributo "content" entrega essa responsa pra ele, porque fica inviável você prever o cenário de tamanhos de devices (viewport), usa o valor flexível "width-device-width" isso vai assumir o tamanho do aparelho do usuário, o parâmetro initial-scale é adicional é para se referir ao browser para abrir com tamanho setado, pra você ter uma idéia a metag tag viewport não é nem oficial foi inventada pela Apple e adotada como padrão pelos outros. Por tranquilidade usa assim é já deve funcionar se seu código tiver redondo: content="width=device-width, initial-scale=1.0"

No mais é isso, fica difícil avaliar seu código sem ve-lo, posta o link do github sei lá, e manda pra gente ver ou sobe em algum lugar. Espero que essas diretrizes tenhas te ajudade. Abs

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .