CODEWITHSUNDEEP
iphonecsssafarifont-size
David Gard
David Gard

Reputation: 12087

Text not sizing correctly on an iPhone

I'm trying to sort some cross browser compatibility issues with my company website, but I've hit a brick wall.

On an iPhone (4, 4s, 5, 5c and 5s), the navigation in the header is displayed incorrectly, and is not resizing with the rest of the page.

On other mobile platforms, in (I think) the most used browsers (Firefox, Chrome, Dolphin, Opera), the text re-sizes in relation to the rest of the site and fits correctly.

To fix the problem, I've tried setting the font-size property by both px and em, but the result is the same either way.

Is this a known issue with iPhones/Safari? If so, does anyone have any ideas on how I can fix it?

Here is the CSS for that section of the page -

#header-navigation{
    bottom: -4px;
    font-weight: bold;
    position: absolute;
    right: 1px;
}
#header-navigation ul.menu{
    margin: 0;
    padding: 0;
}
#header-navigation li{
    display: inline;
    list-style-type: none;
    padding: 0 14px;
    vertical-align: bottom;
}
#header-navigation li.last{
    padding-right: 0;
}
#header-navigation li a{
    color: #6A737B;
    font-size: 14px;
}
#header-navigation li a:hover,
#header-navigation li.current-menu-item a,
#header-navigation li.current-page-ancestor a{
    border-bottom: 1px solid #C41E3A;
    text-decoration: none;
}

Here is how the page looks on an iPhone5 (and here is what it should look like - http://www.dynedrewett.com).

iPhones suck!

Upvotes: 0

Views: 129

Answers (1)

Venu immadi
Venu immadi

Reputation: 1605

use the font size like em it will work fine. and make sure to add meta view port

   <meta name="viewport" content="width=device-width;minimum-scale=0.5,
   maximum-scale=1.0; user-scalable=1;" />

  .example{
  font-size:1.2em;
   }

Upvotes: 1

Related Questions