Chrome and Firefox Browser Default Zoom

Question

I have a problem with this page. I developed it in Firefox on it's default zoom level. The idiot that I am, I haven't tested it on Chrome. So, now I see that the page's layout and/or font size is different on Chrome and other Webkit based browsers. Default Chrome zoom level is 75% so everything is smaller on Chrome. I have to say that I've made a dozen of web apps but have concentrated on the backend side of the application and never put many thoughts in how the page looks like on different browsers.

I mean, I have if javascript cross browser stuff had to be addressed but this is something that I never came across.

What I think is wrong with this is font size. I have a #main-wrap that wraps the entire app and has a base font size of 16px. So, #navigation a has 0.7em because that way it looks normal in Firefox, but looks really small in Chrome.

Could anyone post some tips or hints as to way this is happening?

EDIT:

I've fixed the problem with

zoom: 1.29;
-moz-transform: scale(1);
-moz-transform-origin: 0 0;

And it works but, as I know, it's a good to do this like this. Is there a CSS technique do make pages look the same across browsers?

Answer 1

I've had this issue as well. Using the @viewport tag works well. Here are the articles that I used to resolve the issues:

• Firefox @viewport tag - https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport
• Setting viewport and zoom - https://css-tricks.com/snippets/html/responsive-meta-tag/
• To make sure fonts display weight properly across browsers, an article regarding faux font bolding is http://alistapart.com/article/say-no-to-faux-bold

There are a lot of similar questions with suggestions. Here's one that helped me:

• https://stackoverflow.com/a/26353104/2256476