0

This one is messing with my head. The following HTML/CSS looks fine on every browser, expect when I read it on an iPhone. The text in the a tag(SITE DESIGN SOME COMPANY) is noticeably smaller by about 25%. I have gone up through the DOM and made sure no other styles are computing on my desktop.

<footer>
COPYRIGHT 2012 / <a href="http://somesite.com">
SITE DESIGN SOME COMPANY</a> / ALL RIGHTS RESERVED
</footer>      

footer {
width: 100%;
position: absolute;
padding: 10px 0 10px 0;
left: 0px;
bottom: -50px;
text-align: center;
word-spacing: 20px;
font-size: 75%;
}

1 Answers1

0

I've experienced this, too. iPhone renders % font sizes differently than other browsers. Especially if nested inside multiple elements with multiple % changes (if your <footer> for example is inside another element with another 75% font size declaration).

If you change 75% to 0.75em (or use something other than a percentage), you should be back in business.

footer {
width: 100%;
position: absolute;
padding: 10px 0 10px 0;
left: 0px;
bottom: -50px;
text-align: center;
word-spacing: 20px;
font-size: 0.75em; /* or 10pt, or... */
}
Patrick Moore
  • 13,251
  • 5
  • 38
  • 63
  • I tried the same thing, but no go. I also tried it with font-size: small and font-size: 13px. –  Oct 20 '12 at 01:27
  • 1
    Check out `-webkit-text-size-adjust: 100%;` at this post: http://stackoverflow.com/questions/2545542/font-size-render-in-iphone (just found this myself) – Patrick Moore Oct 20 '12 at 01:28
  • That was it! added that to the body css and it looks perfect. Thank you! –  Oct 20 '12 at 01:35