# 044: Ajustes responsivos no emulador real - CSS-Tricks

Anonim

Comprimir um navegador de desktop muito estreito pode dar a você uma vaga noção de como um design responsivo funciona, mas não é uma representação precisa de um dispositivo de tela pequena real. E dispositivos de tela pequena reais são o que estamos projetando aqui, não outros designers curiosos comprimindo seus navegadores =).

Neste screencast, abrimos o simulador iOS (vem de graça com o XCode em um Mac) e fazemos alguns ajustes de design com base no que estamos vendo lá. Na minha experiência, o simulador é muito preciso para o que você vê no dispositivo real. Eu também vi diferenças - por exemplo, o uso de memória. Logo após o lançamento deste site, eu estava vendo travamentos no webkit móvel - e isso não estava acontecendo no simulador.

Uma coisa que fazemos é remover o efeito de papel empilhado 3D na consulta de mídia mais estreita. Também descobrimos que o anúncio no cabeçalho está causando alguma rolagem horizontal no celular, algo indesejável em como estamos abordando o layout do celular. Felizmente, conseguimos rastrear isso imediatamente, mas às vezes essas coisas são difíceis de rastrear e você apenas esconde o overflow-xno corpo, o que no final das contas fazemos aqui.

Ajustamos alguns tamanhos de fonte também para telas menores.