Question innerWidth & innerHeight

Question

Question innerWidth & innerHeight

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

Hello, I do not think the size of the screen changes when I resize the screen

<!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>

javascript metodos

asked by francisco dwq 20.12.2017 в 18:37

source

2 answers

problem with image in the bootstrap carousel 4 How to obtain a GMAIL account already registered in the device?

score 2 · Answer 1

Use the object window directly to get the dimensions innerWidth and innerHeight since the parameter e do not have those properties:

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>

score 1 · Answer 2

You can use window.innerHeight and width respectively, you can also use an onload to load the width and height directly when the page loads.

here an example. I hope I help you

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>