show pixel dimensions of the current viewport in title / status bar
Can anyone recommend a Firefox addon that is compatible with FF quantum that shows the dimensions of the current viewport while resizing the browser window. Ideally in the status bar or title and updating "live" as you resize the window.
I had that with an old add-on that showed the dimensions in then right bottom corner of the window, very useful. Miss that terribly.
Thanks a lot!
All Replies (9)
Do you need it only for web development? Try Responsive design mode in dev tools.
Changing the contents of the <title> tag, or showing an overlay in the corner of the document, should be easy for an extension or user script.
Detecting resize events is not complicated, I have an example in this page:
https://www.jeffersonscher.com/res/resolution.php
But I haven't searched to see what might be available. Did you try the Add-ons site?
Thank you, I tried the add-on site. With no luck. I just only like to have a short information of the display sizes when I resize the browser window, make it bigger and shorter- so I can check the design, but FLUIDLY, that I can see the size and the changing of the design in the breakpoints. I am NOT looking for a responsive layout checker.
Just a simple information of the domensions at the footer or somewhere else,..... I had that and got used to it. I like to have that back ;)
Modified
Hi Siseby, what was the extension you used before called?
Unfortunatly I cannot remember. But It was said, that it will not work in the update. It was shown in an add-on bar. https://addons.mozilla.org/de/firefox/addon/new-add-on-bar/
Yes, it's not possible to generate an Add-on bar in Firefox 57, so the information would need to go somewhere else, like a floating div in the lower corner of the page.
To find the old name, you could check the Add-ons page. Either:
- Ctrl+Shift+a (Mac: Command+Shift+a)
- "3-bar" menu button (or Tools menu) > Add-ons
- type or paste about:addons in the address bar and press Enter/Return
In the left column of the Add-ons page, click Extensions. Then on the right side, check near the top for a "Show Legacy Extensions" link.
Thank you, it was the FIRESIZER ;) the dimension was shown in the add-on bar
As a temporary workaround to display the viewport dimensions, do you want to try a bookmarklet? You can install it from here:
https://www.jeffersonscher.com/res/sumomarklets.html#ViewportDims
Firefox will not run bookmarklets on sites with certain CSP rules, but otherwise it should work.
This is the script run by the bookmarklet:
function updateResolution(){ if(!document.getElementById('vw_pnl')){ document.body.insertAdjacentHTML('beforeend','<div id="vw_pnl" style="position:fixed;right:1px;bottom:1px;z-index:9999;color:#000;background-color:#ffa;font-size:12px;margin:0;padding:2px"></div>'); } vwpnl=document.getElementById('vw_pnl'); vwpnl.innerHTML='<b>CSS:</b> '+window.innerWidth+' x '+window.innerHeight; if(window.devicePixelRatio){ var wdpr=window.devicePixelRatio; vwpnl.innerHTML+=' <b>Device:</b>'+Math.round(window.innerWidth * wdpr)+' x '+Math.round(window.innerHeight * wdpr); } vwpnl.innerHTML+=' <button onclick="document.getElementById(\'vw_pnl\').style.display=\'none\';" style="font-size:12px;line-height:13px">x</button>'; } var resizeTimeout; function resizeThrottler(){ if(!resizeTimeout){ resizeTimeout=setTimeout(function(){resizeTimeout=null;updateResolution();},200); } } window.addEventListener('resize', resizeThrottler, false); var vwpnl=document.getElementById('vw_pnl'); if(vwpnl){ vwpnl.style.display='block'; }else{ updateResolution(); }
Modified
That is great! Thank you so much. It will help me a lot. Thank you again for your time and efforts! Probably there will be updates in the add-ons sooner or later. Until then: perfect!