Problema responsivo window.matchMedia

[JUMASOL]

Hola.

Estoy utilizando javascript para eliminar y añadir elementos en pantallas de bajas resoluciones con window.matchMedia.

Ejemplo:

Código:

if (window.matchMedia("(max-width: 399px)").matches) {
document.getElementById("ter").remove();
}

Funciona perfectamente y sin problemas.

Pero el problema viene cuando el usuario rota la pantalla. Imaginemos un móvil con 400px (aproximadamente) de ancho en visión vertical. Funcionaría el script que he puesto, pero al rotar la pantalla a su anchura horizontal, naturalmente mayor de 400px, el elemento #ter sigue eliminado, porque habría que refrescar el navegador para que vuelva a leerse el script y no aplicar al orden de eliminación.

No es tema que se pueda dejar pasar, porque hay un cierto número de elementos afectados por esta fórmula, tanto para eliminar como para introducir en cada página.

¿Hay alguna forma de corregir esto?

Gracias.

[JUMASOL]

He encontrado esto, que funciona:

Código:

window.onorientationchange = function() { location.reload() };

Ahora tengo un problema que debe ser de fácil solución pero que no soy capaz de solventar.

Si lo pongo en el html, funciona y refresca:

<script>
window.onorientationchange = function() { location.reload() };
</script>

Pero si lo meto en el archivo .js donde está todo lo demás, no.

Lo meto tal cual:

Código:

window.onorientationchange = function() { location.reload() };

¿Tiene que estar necesariamente en el archivo html? ¿o es que lo estoy poniendo mal en el .js?

Gracias.

[JUMASOL]

Hola de nuevo.

onresize tiene mejor respuesta en navegadores.

Código:

window.onresize = function() { location.reload() };

[IsaBelM]

y por qué no usas media queries de css?? para este caso es más adecuado

edito.- usa la función multimedia orientation