viewport width

classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|

viewport width

fschmidt
Administrator
Hugo, I want a simple web page that dynamically shows the width of the viewport.
Reply | Threaded
Open this post in threaded view
|

Re: viewport width

Hugo <Nabble>
You can build a blank HTML page with a piece of javascript like this:
window.onresize = function() { document.write(window.outerWidth + '<br/>') }
Reply | Threaded
Open this post in threaded view
|

Re: viewport width

fschmidt
Administrator
doesn't work

h.html
Reply | Threaded
Open this post in threaded view
|

Re: viewport width

Hugo <Nabble>
Improved version:
<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
                <script>
                        function p() { document.body.innerText = window.outerWidth + 'px'; }
                        window.onresize = p;
                        p();
                </script>
	</body>
</html>
Reply | Threaded
Open this post in threaded view
|

Re: viewport width

fschmidt
Administrator
thanks, closing
Reply | Threaded
Open this post in threaded view
|

Re: viewport width

fschmidt
Administrator
Why did you use outerWidth instead of innerWidth?
Reply | Threaded
Open this post in threaded view
|

Re: viewport width

Hugo <Nabble>
In that simple page it doesn't matter, the value is the same. But innerWidth is probably the right choice for you, since the idea is to check how much horizontal space is available for the page.
Reply | Threaded
Open this post in threaded view
|

Re: viewport width

fschmidt
Administrator
thanks, closing