搜索 | 用户支持

防范以用户支持为名的诈骗。我们绝对不会要求您拨打电话或发送短信,及提供任何个人信息。请使用“举报滥用”选项报告涉及违规的行为。

Learn More

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!