Search code examples
htmlcssiphonemobile-safari

Font size increases when clicking on an anchor/link(in a specific page) in iphone

This problem is occuring in iphones only. I checked it in an iphone 5(landscape mode) and iphone 4s(landscape mode).

Here's a link to the video

I tried specifying the font size but it didn't work.

Solution

  • Looks like iphones auto resize the text and to avoid that I used this:

    body { -webkit-text-size-adjust: 100%; }
or
body {-webkit-text-size-adjust: none; } /* works perfectly in landscape mode */

    For future users: If you're having issues similar to this in firefox, you can try to fix it with this.

    body { moz-text-size-adjust:100%; }

    So after a couple of hours of searching SO I found out that mobile Safari does try to adapt content so that it's readable on screen by default - it has different default styles to other browsers.

    I don't know the exact rules - but when it comes to font sizes, it seems to work like this:

    • Text inside a paragraph, list item, or other 'text' element: Apply the author's style without adapting.

    • Text inside a DIV or other non-specific element: Treat as 'plain text' and 'adapt' the size according to Mobile Safari's rules.

    So - the short answer is, wrap your text in a paragraph, and apply the font-size rule to that.

    SOURCE