style changes on the iphone when updating text dynamically, scaling issue?

I have a few divs that I dynamically update by changing the style from none to block

They look fine on the ipad, FireFox, IE, Chrome

But when I check the iphone, the text within these divs seem to not scale correctly.
Note: for some reason, the text within the div rot2 looks fine, but for rot1 and rot2 the font size/style is different

The divs have both a class and a style, eg:

<div style="display:  block;" id="rot1" class="contentcentre">
  <ul class="news">
    <li><div class="listart"></div>
      <h3>title 1</h3> <p>text1</p>
    </li>
  </ul>
</div>
<div style="display:  none;" id="rot2" class="contentcentre">
  <ul class="news">
    <li><div class="listart"></div>
      <h3>title 2</h3> <p>text2</p>
    </li>
  </ul>
</div>
<div style="display:  none;" id="rot3" class="contentcentre">
  <ul class="news"> 
    <li><div class="listart"></div>
      <h3>title 3</h3> <p>text3</p>
    </li>
  </ul>
</div>

Code (markup):

[For reference, the site is rightsfortenants.co.uk and you can see the text rotating (wait 30 seconds) ... but you will only see this on the iphone ]

Its a new site, so please excuse the embarrassing bad mark-up/design (still lots to do)

I've tried using :
<meta name="viewport" content="width=device-width; initial-scale=1.0">
but this doesn't solve the issue (and scaling to 1.0 or a fixed with isn't what I want either, its seems be a font size style issue with dynamically created text)


Does anyone know what the issue is (is it due to the scaling?), and how would I go about fixing this?