1

Hola buenas no me sale que el tamaño de la pantalla vaya cambiando cuando redimensiono la pantalla

<!DOCTYPE html>
<html lang="es">
<head>
	<title>Práctica</title>
	<meta charset="UTF8"/>
</head>
<body>

	<p>El ancho de la pantalla es de <span id="anchoPantalla">XXXXXX</span> píxeles</p>
	<p>El alto de la pantalla es de <span id="altoPantalla">XXXXXX</span> píxeles</p>


	<script>
window.onresize = function(e) {

		let ancho = e.innerWidth;
		let alto = e.innerHeight;

		console.log(ancho);
		console.log(alto);
		document.getElementById('anchoPantalla').textContent = ancho;
		document.getElementById('altoPantalla').textContent = alto;

	}
  </script>
</body>
</html>

2 respuestas 2

2

Utiliza el objeto window directamente para obtener las dimenciones innerWidth y innerHeight ya que el parametro e no tienen esas propiedades:

window.onresize = function(e) {

		let ancho = window.innerWidth	;
		let alto = window.innerHeight;

		console.log(ancho);
		console.log(alto);
		document.getElementById('anchoPantalla').textContent= ancho;
		document.getElementById('altoPantalla').textContent = alto;

	}
<p>El ancho de la pantalla es de <span id="anchoPantalla">XXXXXX</span> píxeles</p>
	<p>El alto de la pantalla es de <span id="altoPantalla">XXXXXX</span> píxeles</p>

1

Puedes utilizar window.innerHeight y width respectivamente, ademas puedes usar un onload para que te carga directamente los width y el height cuando se carga la pagina.

aqui un ejemplo. Espero te ayude

window.onresize = function(e) {

		let alto = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight

		let ancho = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;;

		console.log(ancho);
		console.log(alto);
    
    
	var x = document.getElementById("anchoPantalla");
x.innerHTML = ancho;

	var y = document.getElementById("altoPantalla");
y.innerHTML = alto;

	}
  
  
  window.onload = function(e) {

		let alto = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight

		let ancho = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;;

		console.log(ancho);
		console.log(alto);
    
    
	var x = document.getElementById("anchoPantalla");
x.innerHTML = ancho;

	var y = document.getElementById("altoPantalla");
y.innerHTML = alto;

	}
<!DOCTYPE html>
<html lang="es">
<head>
	<title>Práctica</title>
	<meta charset="UTF8"/>
</head>
<body>

	<p>El ancho de la pantalla es de <span id="anchoPantalla">XXXXXX</span> píxeles</p>
	<p>El alto de la pantalla es de <span id="altoPantalla">XXXXXX</span> píxeles</p>


</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.