Well, unfortunately you cannot. Different Web browsers'
layout engines have a big number of incompatibilities and subtle peculiarities in rendered layout of every piece of content. So, what to do?
As to the font size, apparently, you can make it the same by specifying font metric precisely in your CSS. But it won't make your pages look absolutely identical. I think the best way to work around this problem is to develop page style and design less sensitive to those difference. In other words, you will need to develop the design which looks unique and easily recognizable, and allow some of those subtle differences to appear, but not destroy your design. One of the most powerful weapons should be
simplicity. First of all, you should remember that your goal is to provide interesting and informative content, perfect readability, easy navigation and self-explaining ways to find stuff the user wants, not to "beautify" the pages and not to show off your Web UI skills. Every single line or color change on your page should serve some purpose, otherwise it should not exist.
So, first of all, you will need to use only the features common for all layout engines. Please refer to:
http://en.wikipedia.org/wiki/Layout_engine[
^],
http://en.wikipedia.org/wiki/Comparison_of_web_browser_engines[
^],
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29[
^],
http://en.wikipedia.org/wiki/HTML5_in_mobile_devices[
^].
And now, about the "resolution" and Web page size. The problem is really the size of a page, which is defined by the user, not just by the device. To make your page look good on pages of different sizes, you will need to learn liqud, fluid, elastic design. Please see my past answer with further links:
To Get Screen resolution[
^].
—SA
Submit an article or tip