Chrome renders em based font sizes differently on devices

Question

I'm having an issue comparing font sizes between pages on my layout. I have the font set on the body with font-size: 100%; and on my paragraph tags with font-size: 1em; .

I have a two column page set with CSS columns and a single column layout. The font is rendering larger on the single column page. It's also rendering differently with font-size: .75em; in the footer and on a main section of my site.

I've determined that it's Chrome only and appearing to cause the issue on the Nexus 7. The issue is a non issue on Chrome in an iPad 3.

Does anyone have any experience with this?

Answer 1

These are 2 different OS, this is usually regular to have these irregularities between devices. EM is based on the default font-size, if haven't declared one, the os depending on the screen resolution will declare one. font-size:100% won't do anything, you should declare a constant font-size ie font-size:12px in the body.

Then you should have consistency or close to it.