A simulação responsiva em DevTools cromados é sempre precisa?

Então, estou a construir um site e quero que seja sensível e compatível com o telemóvel. Eu tenho usado DevTools Chrome para ver o site por diferentes modelos de dispositivos e parece estar bem. De qualquer forma, fui testá-lo usando localtunnel no meu telemóvel e a imagem de fundo está numa posição diferente da vista em DevTools.

O DevTools é sempre 100% preciso? Ou isto é de alguma forma relevante para o "localtunnel", ou algo completamente diferente?

tentei. à procura online, não encontrei nada sobre a DevTools ser imprecisa.

Obrigado antecipadamente., Jack

Author: Jack HK, 2019-11-24
Source

5 answers

Por isso, há algumas coisas a considerar nesta questão.

As ferramentas do Dev Chrome nem sempre são precisas

Primeiro, Chrome Dev Tools não são 100% precisos. De facto, uso o teste de resolução de extensão em conjunto com Ferramentas Dev cromadas para testar diferentes tamanhos/resoluções do ecrã.

Você pode ler mais em Chrome Dev Tool inacuracy issues here: Porque o Chrome DevTools é impreciso para testes móveis

Diferente Suporte em navegadores e dispositivos

Da mesma forma, vários navegadores têm diferentes níveis de suporte para elementos / funções CSS. Por exemplo, o E11 mal suporta a funcionalidade CSS complexa, a menos que seja prefixada, apesar de funcionar bem no Chrome/Firefox/Safari.

Verifique a compatibilidade de várias funcionalidades CSS que deseja implementar numa variedade de navegadores usando esta ferramenta: Posso usar

Parralax não é suportado ou não funciona corretamente na maioria dos móveis dispositivos

Pode ler mais sobre este assunto aqui: a rolagem da paralaxe não funciona em css móveis

Fixação de fundo:o fixo pode não renderizar correctamente ou ser suportado no móvel

Mais informações sobre este assunto podem ser encontradas ao ler este fórum: O Safari (ipad e iphone) torna as imagens de fundo incorrectamente

Mas, essencialmente, pelo seu CSS fornecido, vejo que está a usar este atributo css. 
.front-banner { 
    background-image: url("../img/frontbanner2.png"); 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    display: block; 
    height: 100vh; 
    width: 100%; 
    position: relative; 
    text-align: center; 
    overflow: hidden; 
}
Leia desta questão exacta, tal como já foi abordada na área da pilha: como replicar a ligação de fundo fixada nos iOS

Posição de fundo:o centro também pode não renderizar corretamente ou ser suportado no móvel

Pode tentar substituir background-position:center pelo seguinte: 

background-position-x: 50%;
background-position-y: 0%;
background-position: center top;

De acordo com esta resposta existente: CSS background-position not working in Mobile Safari (iPhone/iPad))

Obrigado, espero que isto ajude alguém no futuro!
 4
Author: EGC, 2019-11-24 22:44:33

Você pode sempre usar a régua do ecrã (Veja S/O post aqui) e dimensionar a janela para a proporção de proporções da sua verificação. Espero que ajude!

Editar: outra opção

Se tiver espaço para ele, poderá executar o android x86 (~3-4gb) num emulador e ajustar a resolução do ecrã dos emuladores (esta é uma das muitas coisas para as quais preciso do android x86)

 1
Author: Werlious, 2019-11-24 21:05:18
Só posso dizer por experiência própria que acho as ferramentas cromadas mais precisas do que as do Firefox. Mas para alguns dos meus clientes, ainda prefiro crossbrowsertesting.com lá eu posso testar com centenas de dispositivos reais. Mas não é de graça. A minha conclusão é: não é 100% precisa.
 1
Author: TYPO3 Freelancer, 2019-11-24 21:07:37

Encontrei um problema semelhante onde, se especificasse o emulador cromado, simularia um dispositivo com 375px que renderia uma página html com largura de 900px, por exemplo. Acontece que me esqueci de adicionar este cabeçalho no ficheiro html: 

<meta name="viewport" content="width=device-width, initial-scale=1">
Para as pessoas que aterram aqui, isto pode ajudar.
 0
Author: Giggs, 2020-05-26 08:55:13

Eu não sei se tenho um problema semelhante, mas quando estou usando para res móveis, em seguida, eu mudo para desktop, em seguida, eu mudo novamente para res móveis alguns dos códigos css não parece renderizar corretamente.. em outro caso, com os mesmos códigos css em meus projetos anteriores parece funcionar bem...

 0
Author: Rian, 2021-01-20 18:17:58