fonts too small on iOS but on android and desktop is fine?

Question

Is there something about iOS phones/tablets that does not resize my font and css settings? It works fine when I view you view on an Android. Can someone explain or help me with a solution? See images below:

Android

iOS

link: https://jsfiddle.net/w9357vxo/ here is a snippet code:

<div class="twocol smwidth">
    <div class="col1">
         <h2>The Situation</h2>
         <p>
    For vacationers, deciding to take a cruise is exciting, but choosing the right one requires a great deal of information, cost consideration, and input from friends and family. Carnival wanted to make the process easier by recommending cruises that would best suit the lifestyles, demographics and interests of their passengers.
         </p>
         <p>
    They also wanted to make it easy to share details with travel companions. Carnival needed a more personalized communication strategy to help their prospective passengers navigate through the decision process.
         </p>
     </div>
     <div class="col2">
         <h2>The Solution</h2>
         <p>
    Carnival collected email addresses on their homepage as part of the lead generation efforts, but  Nimblefish helped them to capture additional relevant data that would lead to a more personalized communication.  Prospective passengers were asked:
         </p>
         <ul class="list">
             <li>Tell us about yourself! (Are you a Family with small kids? Teens? A group? Single?)</li>
             <li>Where do you want to go? (Alaska? Mexico? Caribbean? Undecided?)</li>
             <li>How do you do fun? (Relax in the sun? Shopping? Explore Nature? Island Adventure?)</li>
             <li>Are you new to cruising? Are you a former guest of Carnival? Where do you live?</li>
        </ul>
    </div>
 </div>

css:

h1 {
  margin:0;
  margin-bottom:25px;
  padding:0;
  font-size:24px;
  font-weight:700;
  text-align:center;
}
h2 {
  margin-bottom:20px;
  padding:0;
  font-size:18px;
  font-weight:800;
}
p {
  font-size:17px;
  color:#808285;
}
.list li {
  font-size:17px;
  color:#808285;
}

This is caused by font boosting on Android: https://gist.github.com/mojoaxel/7469194 — Mr. Hugo, May 31 '16 at 20:13
what if i want the ios to have the same font as android? it should resize to be bigger but on the ios the fonts are too small. i cant see in my css where its causing this. — Francis, May 31 '16 at 20:19

score 1 · Accepted Answer · answered May 31 '16 at 22:09

1

The problem is not the font-size, it is how you have made things responsive. You should get rid of the fixed widths and replace them by max-widths. Also you should add img {max-width: 100%;} to the image. When you do that, everything will be properly responsive, solving your problem along the way. I have fixed it in this file: https://jsfiddle.net/uek15fmq/

answered May 31 '16 at 22:09

Mr. Hugo

11,887
3
42
60

1

thank you for taking the time in helping me understand and solve this issue, JoostS. – Francis May 31 '16 at 22:37

Mr. Hugo · Answer 2 · 2016-05-31T21:52:01.850

0

The approach is (as always): Step 1 - make all browsers behave the same. Step 2 - fix the problems. The font-boosting on Android can be disabled: https://gist.github.com/mojoaxel/7469194. Media queries can solve the small font issue: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp. Does that help?

Example:

@media screen and (max-width:1000px) {
  p {font-size: 300%!important;}
}

edited May 31 '16 at 21:52

answered May 31 '16 at 20:21

Mr. Hugo

11,887
3
42
60

I don't want foot-boosting to be disabled. If anything I'd like to have iOS be the same font as its displayed on Android. How do I fix the font on iOS using media query if font looks fine on Android? – Francis May 31 '16 at 20:31
Wait... I just realize this is your solution for making the site responsive. – Mr. Hugo May 31 '16 at 20:53
Yes, I would like to fix the font sizing on iOS to look like Android. I can't seem to find out how to do that or what is wrong with my css. See jsfiddle link. – Francis May 31 '16 at 20:57
I have updated the answer again. Now your fonts are 'boosted' on devices rendering a smaller width than 1000px as described in the answer. Tested it on a simulator. Everything works. Please note that the iOS device is showing the correct behaviour and the Android device is showing the unexpected behaviour, not the other way around. – Mr. Hugo May 31 '16 at 21:57
do you have any helpful reference links on ios/android behavior? – Francis May 31 '16 at 22:02
To prevent font-boosting on Android follow the link already sent. To prevent the font-boosting/minimum font-size on iOS use this: http://stackoverflow.com/questions/6210788/how-to-avoid-ios-automatic-font-size-adjustment – Mr. Hugo May 31 '16 at 22:15

fonts too small on iOS but on android and desktop is fine?

2 Answers2