CODEWITHSUNDEEP
androidhtmlioscssiphone
sc_12_19
sc_12_19

Reputation: 27

line-height displaying differently on iPhone and iPad than on other devices

I'm having issues with text displaying differently on different devices. I set the line-height to 1.25em and it appears the way I want it to on across all desktop browsers and Android mobile devices, but it is displaying differently on the iPhone and iPad. On the iPhone and iPad the text looks squished.

Viewport tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS:

html {
    font-size: 62.5%;
    -ms-text-size-adjust: 62.5%;
    -webkit-text-size-adjust: 62.5%;
}

.text-16 {
    font-family: Helvetica, sans-serif;
    font-size: 1.6em;
    line-height: 1.25em;
}

Here is what it looks like on various devices:

iPad 3: iPad 3

iPhone 5:

iPhone 5

Samsung Galaxy Note II:

Samsung Galaxy Note II

OS X Lion: OS X Lion

Any ideas on what could be causing this?

Upvotes: 0

Views: 4037

Answers (1)

Sidharth
Sidharth

Reputation: 1925

did you try setting the html css's font size to 100% ?

Upvotes: 1

Related Questions