CODEWITHSUNDEEP
htmlioscssviewportfont-size
DanielFox
DanielFox

Reputation: 675

Font-size on iOS with viewport

I Just can't figure this out.

I'm build an html game and all the game fonts are bigger in my iPhone4 than they are in my pc browser (Chrome).

enter image description here

I'm using this tag on the html:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />

The font size is set at 4em in the buttons with the "-webkit-text-size-adjust: none;" css property in the whole body.

I know it has something to do with pixel density and the iPhone resolution, but I tried everything and I can't make them both look the same.

If I remove the html viewport tag, then the fonts end up looking much smaller than they're supposed to be.

Thank you.

Upvotes: 0

Views: 1803

Answers (2)

Justin Breiland
Justin Breiland

Reputation: 460

You could try use viewport height for your font sizes. 

 font-size: 5vh;
It will scale your text based on the height of the viewport(window) so it should scale aright between browser and mobile.

Upvotes: 0

knocked loose
knocked loose

Reputation: 3304

Do you have the appropriate media query for it? 4em on mobile is huge, I normally don't go above 1.2-5 em on mobile sites.

add this in your css

@media only screen and (min-width: 1px) and (max-width:590px){

    /*what ever the element is*/{
    font-size: 1em;
    }

    }

Upvotes: 0

Related Questions