Why do elements display larger than specified?
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.
Muokattu
Valittu ratkaisu
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..
Lue tämä vastaus kontekstissaan 👍 1Kaikki vastaukset (2)
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.
Muokattu
Valittu ratkaisu
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..