We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Zoeken in Support

Vermijd ondersteuningsscams. We zullen u nooit vragen een telefoonnummer te bellen, er een sms naar te sturen of persoonlijke gegevens te delen. Meld verdachte activiteit met de optie ‘Misbruik melden’.

Meer info

Deze conversatie is gearchiveerd. Stel een nieuwe vraag als u hulp nodig hebt.

Why do elements display larger than specified?

  • 2 antwoorden
  • 2 hebben dit probleem
  • 4 weergaven
  • Laatste antwoord van cor-el

more options

I am developing a website (my first) and I wish it to display much the same on the major browsers. With Firefox, things are 25% larger than I specify. I did a simple test with a div element: < body >< div style="background-color:red; width:300px;" >This is 300px div< /div >< /body >. (Spaces added in this question as otherwise the tags are not displayed.) The size of the div element on my screen is 375px (as determined by pasting an image of the screen into Paint).

My Firefox setting is 100%. I have a 1680x1050 screen and I wondered whether Firefox was making an adjustment based on my screen resolution. I changed the resolution to 1440x900, 1360x768, 1280x1024, 1280x800 and even 800x600 and got the same result.

I could adjust the zoom setting to compensate on my screen, however that is not a solution because I clearly can't do that to visitors to my website.

What is causing Firefox to display larger than I expect and how do I compensate?

PS. When the browser window is maximized and the screen resolution is 1680X1050, document.body.clientWidth and document.body.offsetWidth are both 1311 - giving a ratio of roughly 1.25. Why are clientWidth and offsetWidth not roughly equal to the width of the screen.

I am developing a website (my first) and I wish it to display much the same on the major browsers. With Firefox, things are 25% larger than I specify. I did a simple test with a div element: < body >< div style="background-color:red; width:300px;" >This is 300px div< /div >< /body >. (Spaces added in this question as otherwise the tags are not displayed.) The size of the div element on my screen is 375px (as determined by pasting an image of the screen into Paint). My Firefox setting is 100%. I have a 1680x1050 screen and I wondered whether Firefox was making an adjustment based on my screen resolution. I changed the resolution to 1440x900, 1360x768, 1280x1024, 1280x800 and even 800x600 and got the same result. I could adjust the zoom setting to compensate on my screen, however that is not a solution because I clearly can't do that to visitors to my website. What is causing Firefox to display larger than I expect and how do I compensate? PS. When the browser window is maximized and the screen resolution is 1680X1050, document.body.clientWidth and document.body.offsetWidth are both 1311 - giving a ratio of roughly 1.25. Why are clientWidth and offsetWidth not roughly equal to the width of the screen.

Bewerkt door robertscolaro op

Gekozen oplossing

You can set the layout.css.devPixelsPerPx pref to 1.0 to disable the 1.25 increase caused by the Windows DPI setting (default is -1).

Otherwise you need to set the Windows DPI setting to 96..

Dit antwoord in context lezen 👍 1

Alle antwoorden (2)

more options

These support forums are for issues with browsing the web using Firefox. For development related questions I advise using the Mozilla Developer Network.

That said, I would bet Windows' DPI settings are to blame here.

Bewerkt door Mark Schmidt op

more options

Gekozen oplossing

You can set the layout.css.devPixelsPerPx pref to 1.0 to disable the 1.25 increase caused by the Windows DPI setting (default is -1).

Otherwise you need to set the Windows DPI setting to 96..