Difference in font size on tablets and phones

Question

I really hope, you are able to assist me on this one, as I'm tearing my hair out... I have a little marquee, based on this code: http://jsfiddle.net/TCJT4/525 that feeds some text.

Here's how it looks on an iPad 6... and please disregard from the preliminary design, but this is how it should look:

Here's how it looks on an iPhone 4S:

The ticker is retrieved from the exact same source, but as you can see, the text appears larger on the iPhone (the iPad image is zoomed, so it appears larger, but in reality, they are both displaying a 320x30 pixels placeholder. The text is temporarily hardcoded to 20px in height and I've tried using other units as well... the banner still looks different on the devices.

I did some debugging of the ticker container/placeholder, as well as the detected banner height and disabled all text-adjusting elements. Here's a result of some of the properties:

iPad 6:   Tickerplaceholder DIV-height: 24pixels, bannerheight: 30px, pixelaspect-ratio: 2
iPhone:   Tickerplaceholder DIV-height: 32pixels, bannerheight: 30px, pixelaspect-ratio: 2
PC (Chrome): Tickerplaceholder DIV-height: 24pixels, bannerheight: 30px, pixelaspect-ratio: 1;

I find it very strange that two retinadisplay devices display the same banner differently - and that the iPad and the PC displays them correctly.

The ticker can also be found here in its latest form: www.videobanner.dk/ph.html

Answer 1

The cause of the problem is related to a quirk or error in iOS Safari, which returned an incorrect and unpredictable height when dealing with unordered lists, containing text of various lengths. This became apparent when I compared different text lenghts on different platforms. No fix has been found, but I was able to circumvent the problem by splitting one string into several shorter strings, such as

<li>This is a text that </li><li>doesn't go well with iOS</li>

In my project, this solution also works... perhaps not that pretty, though.