Why did my pages get larger? Options

[PapaGeek]

I have no idea why this happened, but a few weeks ago, all of the pages that I was displaying in my FireFox browser seemed to get larger.

I created a page for a gaming group that I am into. The idea was to create an image of gaming tiles that was exactly 6 tiles wide and 4 tiles deep with each tile being exactly 207 pixels square. For some reason, the tiles suddenly became, at control 0, 282 pixels square. The text on the page also got larger, and the predefined page sizes of my other pages also got larger.

I found a post that talked about changing the “layout.css.devPixelsPerPx” entry in the “about:config” from -1.0 to 1.0, but that did not fix the problem. I kept playing with the number an discovered that changing the value to 0.74 made the images and the pages display the same way they were a few weeks ago.

Here is the link to the main page that I provided for the gaming group. The individual tile images are not on this page, but the large blank printer setup image is. That image was too large before the change to take a screenshot of it, but now it does display as 1242 x 828, exactly 6 x 4 times 207, so you can take a screenshot of it!

My Webpage


Does anyone have any idea of what else might have changed a few weeks ago to make all of my pages display larger than normal?

[Christian J]

Does this happen to other Firefox users as well, or only for yourself? If the latter, maybe you have simply changed the zoom level in your browser.

Also keep in mind that the size of a CSS pixel on a web page depends both on the zoom level and the monitor resolution. Also the monitor and browser window sizes vary between users. This means that the only way to make a web page fit perfectly in all users' browser windows is by using percentage lengths, or viewport-based CSS units like vh or vw.

[PapaGeek]

The game that we play consists of placing a series of 1.75 inch landscape tiles on the table to build the landscape of a primitive territory. You score points along the way and move your marker on a scoreboard which is about 5 by 3 tiles in size. The concept of the process / webpage was to create a method for players to create a 6 by 4 tile scoreboard for the center of the table with half tiles visible around the edges.

This has to be done with very precise measurements so that the printed scoreboard will fit exactly in the center of the territory that is being created.

When I first created and published the center scoreboard process everything worked fine at the “Ctrl 0” magnification, then for some unknown reason, all of the tiles and scoreboard image start to display larger. I’m not sure what changed the Aspect Ratio for my browser/monitor. And I’m not sure how to set it back to what it was. The Pixel to px ratio was 1 to 1. When I displayed 6 by 4 207 pixel square JPG images, then overlaid it with a 1242 by 828 GIF scoreboard with transparent edges, I could right click on a blank space, select “Take Screenshot”, then click on the scoreboard to capture the full GIF image with the tiles that were behind the transparent edges, paste in onto a word document with very narrow margins and print it on my HP printer. Now that the image is larger, it does not fit on the screen, so I can’t take a “screenshot”, and the various “Ctrl –“ strikes do not give me the exact 1242 x 828 image that I need.

How does my Firefox browser know what “Aspect Ratio” to use for my Dell 1920 by 1080 monitor? Also, with the devPixelsPerPx config setting at 0.74, Firefox and Internet Explorer work fine, but Google Chrome still displays the image too large!