The red box above should be 1"x1". But if you measure it with a ruler, you'll see that the size is not really 1"x1". It is usually smaller than that, unless you have a Macintosh or have personally corrected the dpi setting on your Windows computer.

If you are using Firefox for Windows, try the dpi setting option built into the Firefox preferences dialog. Surprise: it does nothing! Firefox for Windows obeys the setting in the Windows Display control panel and ignores its own setting. Don't ask me why it's still there! Firefox for MacOS X does respect its own dpi setting.

The image above should also be 1"x1". In reality it will be the same size as the red box, and the quality of the image will be degraded because web browsers don't resample images attractively like real graphics editors do.

The text size for most of this page is set to 12 points, so it scales when you change the dpi setting via the Windows Control Panel (or, on a Macintosh, the Firefox dpi setting). If I did not set the size in points, Internet Explorer would scale but Firefox would not. That's because That's because Internet Explorer's default text size is 12 points... while in Firefox, the default text size is not affected by the Windows dpi setting, because the Firefox default text size is specified in pixels.

MacOS X doesn't appear to offer a way to change the dpi setting in Safari.

From the article How do I make my site look good at any resolution?