Solucionado
Boa noite professor. Gostaria de saber qual a maneira mais confiável de testar as diferentes resoluções para o layout, se é com Inspecionar ou com Extensões do navegador, como o Window Resizer, por exemplo. Ja percebi que sempre dá diferenças entre eles para o mesmo layout, por isso não sei qual utilizar. O que vc usou no vídeo? Abçs
Para testar responsividade eu sugiro o Google Chrome (apesar de ser fanboy do Firefox)
abrindo o console do google vc vai ver um ícone de Mobile, e felizmente pro google essa ferramenta deles é muito superior ao do firefox ou qqr outro navegador, ele simula diversos aparelhos padrão, permite rotacionar telas e ainda permite vc simular o evento de Toque.
Ele também permite a utilização de resoluções customizadas.
OK...obg :) Mas na vdd Paulo, essa simulação que o Google Chrome faz acontece esse problema que eu falei, ou seja nao bate com a realidade. Quando eu vou testar por exemplo, no meu tablet (coloquei a resoluçao exata do meu tablet) esta bem diferente do que eu visualizo no Console, e tb esta mais diferente ainda da visualizaçao da aba Inspecionar quando eu arrasto, aumentando e diminuindo para ver os breakpoints. E se eu usar uma Extensão do Chrome entao, pior ainda!!! Talvez eu esteja fazendo alguma coisa errada, ou esse navegador nao é nada confiável!!!
Isso acontece por causa das especificações de cada dispositivo e cada navegador de cada dispositivo. A verdade é que todas as maneiras que você tentar testar em um navegador ou ferramenta de desktop vai gerar um resultado fora da realidade. O ideal mesmo é você está com os dispositivos dos tamanhos que você precisa.
A única exceção é o Safari que simula exatamente o que um Iphone vê, mas também serve apenas para Iphone.
O grande problema é a grande quantidade de dispositivos disponíveis. A melhor forma de testar antes de ir pro celular é usar ou o DevTools mesmo
Imagina um programa que simulasse todos os dispositivos disponíveis por ai haha
É triste, mas não tem nenhuma ferramenta confiável além do Safari para Iphone mesmo :(
Sugiro então criar uma página de teste html com o seguinte script:
<html>
...
<script>
alert('Largura real visível: '+window.screen.availWidth);
alert('Alturareal visível: '+window.screen.availHeight);
</script>
</html>Teste o script no dispositivo alvo, é a forma mais segura de bater em pixels a resolução aplicada pelo dispositivo que conheço.
Nem sempre o que o fabricante diz ser a resolução SUPORTADA, é a resolução padrão, fora que cada navegador tem suas particularidades mesmo no mobile, principalmente em área visível de página.
Outra coisa é... as ferramentas que simulam um dispositivo dificilmente vão ser 100%, elas aproximam bem, mas uma alternativa seria você (em caso de android) usar uma Máquina Virtual (bluestacks como sugestão) para simular o dispositivo alvo.
O funcionamento do navegador em Desktop é bem diferente do Mobile por conta do SO, eu desenvolvo em Phonegap diariamente, e tem coisas que o visual no navegador simulando a resolução funciona, mas no dispositivo não, mas a maioria é por conflito de regras CSS que o navegador Mobile não suporta, neste caso sugiro comparar os recursos que está utilizando no CSS no site "caniuse".
Olá "Sem Frescura" :), você já tentou o seguinte:
No Chrome -> 3 PONTINHOS -> Mais feramentas -> Ferramentas do Desenvolvedor -> Aí vc clica no ícone do celular(Toggle device toolbar(CTRL + SHIFT + M).
Lá em cima Onde tem Responsive Selecione Edit -> Logo em seguida clique no botão Add custom device...
Aí você personaliza colocando por exemplo
Meu tablet As dimensões do seu tablet e tipo e clica em Add. E verifique se vai haver discrepância. Espero ter ajudado.
Oi Sem frescura, caso persista alguma dúvida a respeito desse exercício ou curso pode perguntar aqui mesmo ou se você não tiver mais nenhuma dúvida a respeito você pode marcar uma resposta como solução, finalizando assim esse tópico.Espero ter ajudado. Bons estudos.
Gente, desculpa, nao me apresentei...meu nome é Janaina...obg a todos pela boa vontade. Maison valeu a dica, mas realmente isso é um inferno rsrs Por isso, nao tem site realmente responsivo. Fiquei mto curiosa pra saber como vcs conseguem desenvolver, pq no proprio DevTools já ha uma diferença enorme, só no fato de acionar ou nao o icone de mobile, ou entao qdo aumentamos ou diminuimos o zoom. O layout para mobile é tranquilo, o pior é para pc, isso na minha opiniao. Se vc usar essa * de DevTools com resoluçao para pc, e depois tiver a brilhante ideia de fechar para ver como fica, Deus te proteja rsrsrs