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!

[Christian J]

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.

What is your current zoom level in Firefox? If it's not the default 100% it should be indicated on the right side of the address field. You can also reset it to the the default 100% with Ctrl+0, of course.

Windows 10 also lets you Scale/zoom things like text and icons (see the Display settings), and according to this old post Firefox used/uses that Windows setting too. The answers discuss using CSS media queries to negate that, maybe it could work (but perhaps not if the user zooms, or has a minimum font size specified in Firefox). See also https://developer.mozilla.org/en-US/docs/We...edia/resolution

How does my Firefox browser know what “Aspect Ratio” to use for my Dell 1920 by 1080 monitor?

Display resolution is set in the Windows settings, it should normally be the same as the monitor uses.

Aspect Ratio is not related to this, it's about the height/width ratio of various things. But perhaps it can be skewed if you use atypical resolution settings in Windows --at least that can happen in PC games.

Also, with the devPixelsPerPx config setting at 0.74, Firefox and Internet Explorer work fine, but Google Chrome still displays the image too large!

That only affects your own Firefox browser, not visitors to your web page or even your own other browsers.

[pandy]

Isn't the print preview what you should be concerned about? Isn't the image supposed to be printed?

[Christian J]

Missed the print part. In that case you can make a stylesheet for print media, using physical length units like inches or millimeters. Something like this to start with (I'm not sure what markup and/or CSS selectors you use for the tiles):

CODE

@media print {
    img.tile
    {
        width: 1.75in;
        height: 1.75in;
    }
}

[PapaGeek]

If anyone is interested, the name of the game here is Carcassonne. The concept of the page was to place the game's scoreboard in the center of a 4 tile by 6 tile rectangle where about half of the outer rim tiles would be visible behind the scoreboard when it is printed.

This might not be true for all printer / word processor combinations, but my Microsoft Word talking to my HP 6968 printer allows for 0.12 inch borders. Each Carcassonne tile is about 1 37/48 inches square. 6 tiles would be about 10 5/8 inches wide, leaving only 0.24 inch of margin space on a standard letter size sheet of paper. Also, an image which is 1242 (6 tiles 207) pixels wide is slightly wider than 10 5/8 inches and Microsoft Word will automatically shrink that image to make it fit on the page.

In order to take a Screenshot of my 1242 by 828 image (table) it has to be completely visible on my 1920 by 1080 monitor.

I needed to create an image that was pixel for pixel that I was putting on the page and for some reason, a month or so ago, my web browser decided to display my 207 pixel square images as 279 pixels square! The image was now 1,116px high so it couldn't display fully on my 1080 monitor!


If you follow the BYO link at the bottom of the Tile1 page, you can create the image for yourself and see all of the HTML, CSS, and JavaScript that was used to create it.

The <style> section of my HTML file (CSS) first collapses all of the table and td padding, border, and margins to zero. Then it defines the size for every (JPG) img to 207px square and allows for r0x…r3x for rotate each image 0, 90, 180, 270 degrees.

It then defines an overlay (over the bottom right JPG), position relative, left and top 0 for the GIF scoreboard to be sized and positioned; 621 wide, 414 high, -725 left, -414 top to display the half size scoreboard in the center of the surrounding tiles, then using JavaScript, change the size and position to 1242 wide, 828 wide, -1035 left, -621 top to display the full size scoreboard over all the tiles with the transparent edges displaying half the border tiles.

At this point, copying a Screenshot of the GIF scoreboard would also include the visible portions of the surrounding tiles that are behind the GIF. Again, it is imperative that the GIF’s Screenshot be exactly 1242 by 828 pixels!

It all used to work fine, now it requires that I change the about:config devPixelsPerPx value from -1.0 to 0.74! Why?

[Christian J]

for some reason, a month or so ago, my web browser decided to display my 207 pixel square images as 279 pixels square!

What tool did you use to determine the above 279px value?

I don't see it in my browsers. Although the image files are 260*260px http://www.papageek.com/Tile1/Cath.jpg, the CSS on http://www.papageek.com/Tile1/BYO.htm still shrinks them to 207*207px:

CODE

table.tiles td img.ct {
    width: 207px;
    height: 207px;
    margin: 20px;
}

Again, did you check both your browser's Zoom as well as the Windows Scaling (in Windows Display Settings)? I'd also restore the devPixelsPerPx value to its default.

[PapaGeek]

First of all, the tool I use to determine the pixel size is an old version of Paint Shop Pro. I copy the image from the web page, then paste it into Paint Shop Pro and when my cursor is over the image, the lower right corner of the application displays the pixel size of the image.

To look at the coding used to create your own Center Scoreboard Tile: follow the link at the bottom of the page to the BYO.htm page. Create and empty directory on your disk, then click on the two “buttons”, [Display the Carcassonne Tiles] and [Display HTML Code]. You can drag and drop the Tiles to the empty directory and then use Notepad to copy the HTML Code and save it as an html file to the same directory. All of the CSS, HTML, and JavaScript coding will be in the html file that you copy.

[PapaGeek]

After posting this problem to the Firefox Support Forum, their recommendation was, in "about:config", to change browser.display.os-zoom-behavior = 0 and restore layout.css.devPixelsPerPx back to its default -1.0 setting. All if working fine with their recommendations. Pixel to PX ratio is nowt 1 to 1!

For some reason browser.display.os-zoom-behavior was set to 1 in my about:config settings. Changing it back to 0 fixed everything!