[Notas] La pantalla @media no tiene ningún efecto en las herramientas de desarrollo del navegador

Justo cuando ajusté la sintaxis CSS,不知道為什麼,Después de que la resolución se simula como la resolución del teléfono móvil,La versión no muestra el efecto que debería tener RWD,Al principio pensé que la sintaxis de la pantalla @media no surtía efecto,Después de varias pruebas,Se encontró que la gramática de ancho no siguió el cambio de relación de resolución (Ya está configurado en automático o usa el ancho máximo)。Más tarde, intenté cerrar el modo "Desarrollador web".”Simulación táctil”Caracteristicas,Será normal,No sé por qué afecta de esta manera。

Firefox
Encienda la simulación táctil

 

Desactivar la simulación táctil

 

Borde (Cromo) Método de ajuste
1. punto"…"
2. Seleccione "Agregar tipo de dispositivo"

1. Selección del tipo de dispositivo "Responsive"
2. En "tipo de dispositivo" de “Móvil” Cambiado “Escritorio” 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" />

 

【參考連結】

Deja tu comentario

Por favor, tenga en cuenta: La moderación de comentarios está habilitada y puede retrasar su comentario. No hay necesidad de volver a enviar su comentario.