Breakpoint Calculator
Thursday, 23rd of August, 2017
Today I was looking around for a ‘tool’ that I could add to a web page which would help me when creating responsive/adaptive web designs by telling me the width of the browser window.
Now I know already that there are various programs, such as “Brackets”, which can do this but I was looking for something to drop into an HTML document so that I could find the breakpoints of a design when rendered by various different browers.
It seemed to be a pretty simple thing I was looking for and I was surprised that I couldn’t find anything, so I decided to create one myself.
What I have come up with is an overlay which sits unobtrusively in the upper left hand corner of the page and tells you the width of the browser window as you resize it (you can see it in the upper left hand corner of this page).
The first thing we need to do is to add an element to the DOM, so the following code must be added just before the </body> tag, in this case the new element will be a <div>:
<script>
var mySizeDisplayer = document.createElement('div');
</script>
The new <div> doesn't actually exist in the HTML yet, only in the DOM, so to add it we must append it to the document:
<script>
var mySizeDisplayer = document.createElement('div');
document.body.appendChild(mySizeDisplayer);
</script>
As appendChild suggests the new element has been added to the end of the document, just before the </body> tag. At present it is not very useful as it sits at the bottom of the page in the browser and we may need to scroll down to find it. Not only that- it may inherit some of the styles intended for other parts of the document and may throw your design out of kilter.
What we need to do is start adding styles specific to this new element which will pull it out of the normal flow of the document and keep it positioned in the upper left hand corner of the page.
Before giving it styles of its own we will give it some text to display:
<script>
var mySizeDisplayer = document.createElement('div');
document.body.appendChild(mySizeDisplayer);
mySizeDisplayer.innerHTML = 'screen width:';
</script>
Next we need to position the <div> with some CSS:
<script>
var mySizeDisplayer = document.createElement('div');
document.body.appendChild(mySizeDisplayer);
mySizeDisplayer.innerHTML = 'screen width:';
mySizeDisplayer.style.top = '0';
mySizeDisplayer.style.left = '0';
</script>
What we should have at this point is some text in the upper left hand corner of the page in the browser window. Unfortunately it is still part of the document and in fact has pushed the rest of the document down the page. Depending upon the styles you have created in your own CSS it may have thrown the design completely out of whack, so what we need to do now is remove it completely from the document flow in two ways- firstly we must place it absolutely and secondly we must put it in a layer of its own above the rest of the page by setting its z-index:
<script>
var mySizeDisplayer = document.createElement('div');
document.body.appendChild(mySizeDisplayer);
mySizeDisplayer.innerHTML = 'screen width:';
mySizeDisplayer.style.zIndex= '1000';
mySizeDisplayer.style.position = 'absolute';
mySizeDisplayer.style.top = '0';
mySizeDisplayer.style.left = '0';
</script>
Giving it a z-index of 1000 should ensure it is safely above any other layers you may have in your document.
Next we can add a little bit more styling to make it as discreet as possible while ensuring it is clearly distinguishable from the rest of the page:
<script>
var mySizeDisplayer = document.createElement('div');
document.body.appendChild(mySizeDisplayer);
mySizeDisplayer.innerHTML = 'screen width:';
mySizeDisplayer.style.zIndex= '1000';
mySizeDisplayer.style.position = 'absolute';
mySizeDisplayer.style.top = '0';
mySizeDisplayer.style.left = '0';
mySizeDisplayer.style.fontFamily = 'sans-serif';
mySizeDisplayer.style.fontSize = '8pt';
mySizeDisplayer.style.background = '#ff9999';
mySizeDisplayer.style.padding = '0 2px';
</script>
Now for the fun part- we need to create a function which will measure the size of the screen:
<script>
var mySizeDisplayer = document.createElement('div');
document.body.appendChild(mySizeDisplayer);
mySizeDisplayer.innerHTML = 'screen width:';
mySizeDisplayer.style.zIndex= '1000';
mySizeDisplayer.style.position = 'absolute';
mySizeDisplayer.style.top = '0';
mySizeDisplayer.style.left = '0';
mySizeDisplayer.style.fontFamily = 'sans-serif';
mySizeDisplayer.style.fontSize = '8pt';
mySizeDisplayer.style.background = '#ff9999';
mySizeDisplayer.style.padding = '0 2px';
function sizeFinder() {
var theScreenWidth = top.innerWidth;
var theScreenWidthText = 'screen width: ' + theScreenWidth + 'px';
mySizeDisplayer.innerHTML = theScreenWidthText;
}
</script>
Next we must make it dynamic so that it updates every time the browser is resized so we must add an event listener to the page:
<script>
var mySizeDisplayer = document.createElement('div');
document.body.appendChild(mySizeDisplayer);
mySizeDisplayer.innerHTML = 'screen width:';
mySizeDisplayer.style.zIndex= '1000';
mySizeDisplayer.style.position = 'absolute';
mySizeDisplayer.style.top = '0';
mySizeDisplayer.style.left = '0';
mySizeDisplayer.style.fontFamily = 'sans-serif';
mySizeDisplayer.style.fontSize = '8pt';
mySizeDisplayer.style.background = '#ff9999';
mySizeDisplayer.style.padding = '0 2px';
window.addEventListener("resize", sizeFinder);
function sizeFinder() {
var theScreenWidth = top.innerWidth;
var theScreenWidthText = 'screen width: ' + theScreenWidth + 'px';
mySizeDisplayer.innerHTML = theScreenWidthText;
}
</script>
If you play around with this for a bit you may discover several problems-
Firstly the initial value for the screen size does not appear and must be set, so we can change the text in the same way that we did for the function, but instead of altering the existing code to calculate the page width we can just call the function:
<script>
var mySizeDisplayer = document.createElement('div');
document.body.appendChild(mySizeDisplayer);
sizeFinder();
mySizeDisplayer.style.zIndex= '1000';
mySizeDisplayer.style.position = 'absolute';
mySizeDisplayer.style.top = '0';
mySizeDisplayer.style.left = '0';
mySizeDisplayer.style.fontFamily = 'sans-serif';
mySizeDisplayer.style.fontSize = '8pt';
mySizeDisplayer.style.background = '#ff9999';
mySizeDisplayer.style.padding = '0 2px';
window.addEventListener("resize", sizeFinder);
function sizeFinder() {
var theScreenWidth = top.innerWidth;
var theScreenWidthText = 'screen width: ' + theScreenWidth + 'px';
mySizeDisplayer.innerHTML = theScreenWidthText;
}
</script>
The second problem occurs when you scroll down the page and the new <div> disappears, so the best solution is to change the position of the <div> from absolute to fixed:
<script>
var mySizeDisplayer = document.createElement('div');
document.body.appendChild(mySizeDisplayer);
mySizeDisplayer.innerHTML = 'screen width: ' + top.innerWidth + 'px';
mySizeDisplayer.style.zIndex= '1000';
mySizeDisplayer.style.position = 'fixed';
mySizeDisplayer.style.top = '0';
mySizeDisplayer.style.left = '0';
mySizeDisplayer.style.fontFamily = 'sans-serif';
mySizeDisplayer.style.fontSize = '8pt';
mySizeDisplayer.style.background = '#ff9999';
mySizeDisplayer.style.padding = '0 2px';
window.addEventListener("resize", sizeFinder);
function sizeFinder() {
var theScreenWidth = top.innerWidth;
var theScreenWidthText = 'screen width: ' + theScreenWidth + 'px';
mySizeDisplayer.innerHTML = theScreenWidthText;
}
</script>
The last problem occurs when the screen is resized to the point that a scroll bar appears.
Depending upon your browser (and operating system) the size displayed will suddenly decrease and will display what is essentially an incorrect value because it is not subtracting the width of the scroll bar from the total screen width.
There are 2 solutions to this problem-
- Check to see if a scroll bar is being displayed and deduct its width from the screen width to get the correct value
- Force a scroll bar onto the page
The first solution is easy enough to implement, just check if the rendered part of the window is smaller than the available width:
<script>
var mySizeDisplayer = document.createElement('div');
document.body.appendChild(mySizeDisplayer);
sizeFinder();
mySizeDisplayer.style.zIndex= '1000';
mySizeDisplayer.style.position = 'fixed';
mySizeDisplayer.style.top = '0';
mySizeDisplayer.style.left = '0';
mySizeDisplayer.style.fontFamily = 'sans-serif';
mySizeDisplayer.style.fontSize = '8pt';
mySizeDisplayer.style.background = '#ff9999';
mySizeDisplayer.style.padding = '0 2px';
window.addEventListener("resize", sizeFinder);
function sizeFinder() {
var theScreenWidth = top.innerWidth;
if (top.innerWidth > document.documentElement.clientWidth) {
theScreenWidth = document.documentElement.clientWidth;
}
var theScreenWidthText = 'screen width: ' + theScreenWidth + 'px';
mySizeDisplayer.innerHTML = theScreenWidthText;
}
</script>
Although it might seem like a good solution the truth is it really isn't. When the scroll bar appears it will cause your page to reflow and you really have no idea what would have happened to the layout if it hadn't.
The best solution is to force a scrollbar-
<script> document.body.style.overflowY = 'scroll'; var mySizeDisplayer = document.createElement('div'); document.body.appendChild(mySizeDisplayer); sizeFinder(); mySizeDisplayer.style.zIndex= '1000'; mySizeDisplayer.style.position = 'fixed'; mySizeDisplayer.style.top = '0'; mySizeDisplayer.style.left = '0'; mySizeDisplayer.style.fontFamily = 'sans-serif'; mySizeDisplayer.style.fontSize = '8pt'; mySizeDisplayer.style.background = '#ff9999'; mySizeDisplayer.style.padding = '0 2px'; window.addEventListener("resize", sizeFinder); function sizeFinder() { var theScreenWidth = document.documentElement.clientWidth; var theScreenWidthText = 'screen width: ' + theScreenWidth + 'px'; mySizeDisplayer.innerHTML = theScreenWidthText; } </script>
If you think you might find it useful my-size-displayer.js is available as a free download.