CSS Mobil Android, em size inconsistant

I am now trying to get better results for smart phones and tablets using CSS, Please for this question, I need only advice for "android", I will tackle "IPhone" separately, not in this one.

I have this in the <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

and then I use these in a CSS <style>

and then the size of the <div> shown in different android browsers, is VERY DIFFERENT, is this normal in your use of CSS in the android for mobil? Can you recommend, a stabilizer or a way to get some consistent sizes,

In decktop Chrome browser and firefox, the size is the same, however in mobile Chrome browser and firefox, the size is very, very different? Is there a factor for em size, that I do not know about. I am using the css em, in hopes to compensate for phone browser differences in font size. Any information about CSS size conditions in other android browsers like Dolphin and Maxthon, might shed light for me?

 ps. in this one I have NO -
@media screen and (

actual experience is what I need, but will look at any links provided.
LVL 35
Who is Participating?
COBOLdinosaurConnect With a Mentor Commented:
Instead of using em which is relative to the native font size (which is not the same cross-platform) you might want to try using vh for height and vw for width. those unit relate to the size of the viewport and respond not just to the device but also to screen resiz and orientation.  vw is equal to 1/100 of viewport width and vh is equal to 1/100 of viewport height.  They are support on all modern browsers and mobile.

lherrouConnect With a Mentor Commented:

You say "I am using the css em, in hopes to compensate for phone browser differences in font size."

Maybe you are misunderstanding em size. em size is proportional to the browser font size, so a width of 17.6em is the same as saying Make the width 17.6 times the size of the font. If your goal is to ensure that a certain amount of text can fit in a certain space, or that whatever width you are defining is proportional to the font that's displayed, that's fine.

Maybe you can explain your goals a little more, and we can try to find a way to accomplish them.

Slick812Author Commented:
@ lherrou  , Yes, in smart phones and tablets, there seems to be more font size variation (from some testing), so using a CSS like   width:73px;  was Not effective,  Also the view for mobil was varied, so setting a font size like  font-size:15px;  for readable text, was also not effective. (too big on some, , too small on most others).  I feel that it is always best to not tick-off the person reading the page and let them see their chosen font size. So the use of  CSS  width:9.8em;  worked well in desktop browsers, so if the default font was larger, the width would increase, etc. OR At least it was close enough to have decent sizes. However in mobil Chrome and mobil Firefox, there appears to be too much of a difference, the mobil firefox, looks close enough, and increasing a very little does the trick, BUT in mobil Chrome (android default) the sizes are much smaller than in the non-mobil Chrome, if I use different (larger) em size in mobil Chrome, then the others are much to large to even hope to arrive at a compromise for both, usin the em.  I have done much with CSS, so I can find a way to get something acceptable to view. But my question here is like the many other questions about non-mobil CSS and browser incompatibility.  And what makes (or some CSS thing) the mobil Chrome look like it's smaller using the CSS em. The specific "Goal" for this particular em width and height, , is to have a "Pop-Up" div with a "sign-In" form, and the width needs to allow the larger and smaller font-sizes to show the form elements on the proper line, in mobil chrome, the elements fall out of the proper lines, if not wide enough,
And Yes, I do know several other ways to ensure this, with DHTML and other CSS, but I am trying to find and understand more about mobil web design wid CSS, since now, many i code for, are going with mobil-first (more people are viewing pages in mobil , , than non-mobil) as as starting place.
I guess I would ask you "If your goal in mobil display is to ensure that whatever width and height you are defining is proportional to the font that's displayed, , what do you do in mobil CSS?"    and can you give an example or your methods? I know that there are many methods for you depending on structure, but I am interested in the browser differences for em display, and don't understand the Chrome smaller, (usually Chrome is on Top of this kind of thing)

@ COBOLdinosaur , I have done a little with the CSS vh and vw , , but this seems to be related to the total area size for the browser user display (view). I guess I could try  width:18.5vh;  but from what I know, this does not change with the font-size? But maybe with the additional info above, you have some ways to do this. But mostly I would like to know about the browser inconsistencies in mobil em use.

and another question-extention, do you all test your sites in more than two different android browsers?
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

You are right vh/vw do not change with font-size.  They change with viewport dimensions. However you could define the font-size using vh or vw and then use em to define width and height. That would cause the element dimension and font to be bound to the viewport so that the width in em would be relatively the same in all the browsers regardless of how the font size is being calculated natively.

I don't bother with trying to get android the same, because virtually every phone they are on has differences.  It is hard enough going cross-browser, without having to do device specific coding.  It is like being back in the 90s when there were no standards and everything had to be written more than one way. I think Android gets delivered to manufacturers as a set of hooks and the manufacturer "optimizes" for the primitive graphic sub-routines.

I see a lot of developers just doing different stylesheets and hoping that the code they use for device detection works.

Slick812Author Commented:
@ Cd& , , Yea, although mobil does do web pages well enough to not cause an uproar, It is a monkeys mix of  "Close enough" web page design render and a
"New Territory" feel "like being back in the 90s when there were two standards, IE and Netscape" LOL, and the DHTML, javascript battles.  LOL,  But you can not know how terrifically Glad I am, that MS does not have enough mobil used, so that I have to bang my head on the keyboard,  ,  for IE web page design and code crap.  
But i am now forced to deal with the larger user base of mobil browsers and get web pages that are attractive and user friendly in small single column formats.
Actually Google is becoming the new Microsoft.  The browser development management put a date on a white board, and on that date everything gets pushed whether it is fully tested or not.  Even on the desktop they are screwing up.  IE10 is still a little behind on what it supports, but what it does support is to spec while a Google is out of spec on a lot of the CSS3 feature, but claim to be compliant even if stuff does full implement.  A good example is vh and vw which are "supported" in Chrome, but don't work in a calc, don't work for border width, and render wrong for box shadow values.  IE10 is not perfect but actually does a better job with calc() and vh/vw.  As far as I have looked Firefox has it right because the kept pushing back release until it worked to spec.

I just published a piece about it written by one of the members on my site:


Slick812Author Commented:
I will close this question tomorrow, and divide the points, I was hoping for some more comments about the mobil browser (android) and using CSS, but I guess I'm in the wrong pace for that.
But there's no longer any way for me not to accept that from now on, the Mobil web will drive the DHTML and CSS development cycles, and more web coders will have to turn to Mobil-First browser page creation.

@ COBOLdinosaur, Looked at the site link you gave, read some of it and looked at the codes, will look more soon, , good stuff!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.