Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

show pixel dimensions of the current viewport in title / status bar

  • 9 majibu
  • 1 ana tatizo hili
  • 3 views
  • Last reply by Siseby

more options

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!

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)

more options

Do you need it only for web development? Try Responsive design mode in dev tools.

more options

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?

more options

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 by Siseby

more options

Hi Siseby, what was the extension you used before called?

more options

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/

more options

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.

more options

Thank you, it was the FIRESIZER ;) the dimension was shown in the add-on bar

more options

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 by jscher2000 - Support Volunteer

more options

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!