Get the same Browser’s width value across all Browser types

Firefox, Safari and Chrome have almost the same way to measure the page width of the browser window except IE.


This is due to the fact that IE is using different way to get the width of the window than Firefox/Safari/Chrome.


IE uses “window.innerWidth” property whereas Firefox/Safari/Chrome uses “document.documentElement.clientWidth” to get the width of the browser.


The problem now is that IE tends to include the width of the scrollbar where around 15-18 pixels are added to the sum.


I use a simple javascript coding to make sure all the browsers get the same width:



var ie=0;

var agt=navigator.userAgent.toLowerCase();

if(agt.indexOf('ie')!=-1){ie=1;}

pgwidth = getWidth(); // Please find this getWidth() function elsewhere as it is not written by me and it is not right to post here

if (!ie) { pgwidth = pgwidth - 18; }




Now the pgwidth variable carries almost the same width across all common browsers such as IE, Firefox, Safari and Chrome.