Introduction
Regardless of using a browser extension or add-on, i use a self coded snippet that prints window dimensions and browser variables on screen viewport. You can achive screen dimensions on Chrome Developer Console or Firefox's Firebug or Web Developer Toolbar. I prefer this snippet that stays on screen permanently without opening any development panel.
Preview
Creating function
First of all, let's create a function that will be triggered with window load and resize.
var windowSizePrint = function() { }
Assigning window dimensions to variables
var windowWidth = $(window).width(); var windowHeight = $(window).height();
Append holder div only once with checking its length
if (!$("#window-size-info").length) { $('body').append('<div id="window-size-info"><div><span class="w"></span> X <span class="h"></span></div><style type="text/css">#window-size-info{z-index:9999999;position:fixed;right:0px;bottom:30px;padding:3px 8px;font-family:"Open Sans","Lato",Tahoma;font-size:15px;color:#fff;background-color:#000;box-shadow:0 0 0 2px#fff;}</style></div>'); }
Write dimensions to inner spans
$('#window-size-info span.w').text(windowWidth); $('#window-size-info span.h').text(windowHeight);
Trigger windowSizePrint
function with window resize and load events.
$(document).ready(windowSizePrint); $(window).load(windowSizePrint); $(window).resize(windowSizePrint);
Create a variable that holds browsers' user agent.
var nua = navigator.userAgent;
Create an object that holds boolean variables created with regex.
var browser = browser || {}; browser = { nua : nua, html : $('html').attr('class'), webkit : /webkit/gi.test(nua), gecko : /gecko/gi.test(nua), mobile : /Mobile/gi.test(nua), windows : /Windows/gi.test(nua), mac : /Mac OS/gi.test(nua), chrome : /Chrome/gi.test(nua), firefox : /Firefox/gi.test(nua), apple : /Safari/gi.test(nua), ipod : /iPod/gi.test(nua), iphone : /iPhone/gi.test(nua), ipad : /iPad/gi.test(nua), android : /Android/gi.test(nua), androidVersion : /Android/gi.test(nua) ? nua.match(/Android ([0-9\.]+);/)[1] : "", ie : /MSIE/gi.test(nua), ie11 : /MSIE 11/gi.test(nua), ie10 : /MSIE 10/gi.test(nua), ie9 : /MSIE 9/gi.test(nua), ie8 : /MSIE 8/gi.test(nua), ie7 : /MSIE 7/gi.test(nua), ie6 : /MSIE 6/gi.test(nua), operaMini : /Opera Mini/gi.test(nua), ucBrowser : /UCBrowser/gi.test(nua), x64 : /WOW64/gi.test(nua), x86 : /WOW86/gi.test(nua), tablet : $(window).width() >= 768 && /Mobile/gi.test(nua), desktop : $(window).width() >= 768 && !/Mobile/gi.test(nua), phone : $(window).width() < 768 && /Mobile/gi.test(nua), };
Group console logs to prevent them cover up console window.
For loop brings together all of the variables to browserVariable
string variable.
console.groupCollapsed("browser variables"); var browserVariables = ""; for (var prop in browser) { if (browser.hasOwnProperty(prop)) { console.log(prop + " : " + browser[prop]); browserVariables += prop + " : " + browser[prop] + "\n"; } } console.groupEnd();
Last step, write browser variables to inner div's title to make them apper on mouse hover
$(function() { $("#window-size-info > div").attr("title", browserVariables); });
Complete snippet as a github gist
Live demonstration from codepen.
Resize window or hover over black div, to see changes.
See the Pen Window Dimension Print by Ömer Aslanbakan (@Aslanbakan) on CodePen.
Published by Ömer Aslanbakan on