Login

Learning & Support

Documentation

Resizing Web Content at 100% minus toolbar

Twixl Support Team Updated: - Created :

If you have HTML Content (either in an InDesign-article, in an HTML-article our some kind of Web Viewer), this trick will help you to calculate the available vertical screen estate, without the toolbar!

What?

The toolbar is not the same on all devices, certainly not on Android devices (due to the vast multitude of available Android devices). The trick is to check the available size in the browser window (which in Twixl terminology is the size of the actual web viewer area, equal to the screen size minus the toolbar)

How?

You can easily do this in JavaScript as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Window Size</title>
</head>
<body>
    <pre><script>
 var windowWidth = window.innerWidth
 || document.documentElement.clientWidth
 || document.body.clientWidth;

 var windowHeight = window.innerHeight
 || document.documentElement.clientHeight
 || document.body.clientHeight;

 document.writeln("window width: " + windowWidth);
 document.writeln("window height: " + windowHeight);
    </script></pre>

</body>
</html>

Was this article helpful?

0 out of 0 found this helpful