搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

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

  • 9 回覆
  • 1 有這個問題
  • 3 次檢視
  • 最近回覆由 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!

所有回覆 (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 ;)

由 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();
}

由 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!