Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


CSS Mobil Android, em size inconsistant

Posted on 2013-05-23
Medium Priority
Last Modified: 2013-06-01
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.
Question by:Slick812
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
LVL 38

Assisted Solution

lherrou earned 1000 total points
ID: 39194090

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.

LVL 53

Accepted Solution

COBOLdinosaur earned 1000 total points
ID: 39194701
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.

LVL 34

Author Comment

ID: 39195159
@ 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?
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

LVL 53

Expert Comment

ID: 39195844
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.

LVL 34

Author Comment

ID: 39195865
@ 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.
LVL 53

Expert Comment

ID: 39195886
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:


LVL 34

Author Comment

ID: 39206680
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!

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Often, people trade privacy and security for convenience. However in today's concrete jungle, this is an extremely foolish decision considering the vast amount of technologies being used against consumer interest. First off, I won't waste any time e…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question