Solved

CSS Mobil Android, em size inconsistant

Posted on 2013-05-23
7
1,148 Views
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>
width:17.6em;
height:6.1em;

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.
0
Comment
Question by:Slick812
  • 3
  • 3
7 Comments
 
LVL 38

Assisted Solution

by:lherrou
lherrou earned 250 total points
Comment Utility
Slick812,

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.

Cheers,
LHerrou
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 250 total points
Comment Utility
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.

Cd&
0
 
LVL 33

Author Comment

by:Slick812
Comment Utility
@ 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?
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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.

Cd&
0
 
LVL 33

Author Comment

by:Slick812
Comment Utility
@ 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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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:

http://coboldinosaur.com/pages/css-calc-function.html

Cd&
0
 
LVL 33

Author Comment

by:Slick812
Comment Utility
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!
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

You should read OS supplied guidelines before developing. I can't stress that enough. The guidelines will help you understand the reasons mobile app developers do what they do.  Apple is very particular when they review appstore submissions.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

762 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now