CSS @media no está funcionando correctamente en teléfonos móviles.

Ah, tengo un pequeño problema aquí, se trata del @media

Este es mi código HTML:

<main>
<section class="a">
  <p>AAA</p>
</section>
</main>

Este es mi código CSS:

* {
margin: 0px;
padding: 0px;
}
.a {
background-color: lavanda;
color: rojoterracota;
width: 100vw;
height: 100vh;
}

@media only screen and (min-width: 1300px) {
.a {
color: azulacerooscuro;
height: 50vh;
}
}

Especificaciones de mi teléfono (captura de pantalla)

Entonces, con algunas líneas de código anteriores y la captura de pantalla de las especificaciones de mi teléfono, si giro mi teléfono o activo el modo de escritorio, la altura de ese

section …..> debería cambiar a 50vh en lugar de 100vh porque la resolución de mi pantalla de teléfono es mucho más de 1300px. Pero el problema está ahí, no funciona cuando giro mi teléfono o incluso cuando intento activar el modo de escritorio.
Después de un momento, intenté cambiar el min-width a 600 y funcionó. Así que abrí la consola y decía “el ancho es de 400px y la altura es de 720px” y yo pensé “¿Qué demonios???”

Consola (captura de pantalla)

Y así, tengo un gran problema con esta parte porque la resolución de mi pantalla no es la misma que la de mi IDE y la resolución de mi navegador, ¿hay alguna forma de hacer que mi navegador y mi IDE solo utilicen la misma resolución que la de mi pantalla de teléfono en lugar de separarlos en dos resoluciones diferentes? También lo comprobé en otro teléfono, es un Samsung Galaxy Note 10, y veo que no se basa en ningún tipo de proporción para calcular la diferencia entre la resolución de la pantalla y la resolución del navegador, creo que se basa en la densidad de píxeles de cada pantalla. Por favor, ayúdenme.

/*Antes de que alguien se pregunte 
por qué no uso una computadora, 
diré... Hmm..... sí, lo sé, 
sé que debería usar una pc 
en lugar de un teléfono móvil, pero 
no tengo una pc (por ahora)*/