[Notas] A tela @media não tem efeito nas ferramentas de desenvolvimento do navegador

Apenas quando ajustei a sintaxe CSS,Eu não sei porque,Depois que a resolução é simulada como a resolução do telefone móvel,A versão não mostra o efeito que RWD deveria ter,No começo eu pensei que a sintaxe da tela @media não tinha efeito,Após testes repetidos,Verificou-se que a gramática da largura não seguia a mudança da proporção de resolução (Já definido para automático ou usar largura máxima)。Mais tarde, tentei fechar o modo "Desenvolvedor da Web"”Simulação de toque”Recursos,Vai ser normal,Eu não sei por que isso afeta dessa forma。

Firefox
Ativar simulação de toque

 

Desligue a simulação de toque

 

Beira (Crómio) Método de ajuste
1. ponto"…"
2. Selecione "Adicionar tipo de dispositivo"

1. Seleção de tipo de dispositivo "Responsivo"
2. Em "tipo de dispositivo" de “Móvel” 改成 “Área de Trabalho” para。

 

《2024/02/23 更新》

後來找出原因網站在 HTML Head 有定義 viewport 的 meta tag如下

<meta name="viewport" content="width=device-width" />

但沒有定義 initial-scale 比例因此補上就可以了

<meta name="viewport" content="width=device-width, initial-scale=1" />

 

Referência [link]

Deixe um comentário

Por favor, note: Comentário moderação é ativado e pode atrasar o seu comentário. Não há necessidade de reenviar o seu comentário.