2

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.

Rahul
  • 493
  • 6
  • 27

2 Answers2

2

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

Community
  • 1
  • 1
Rahul
  • 493
  • 6
  • 27
0

I think you can simply fix with this meta tag , try to add this to your html

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Jishnu V S
  • 8,164
  • 7
  • 27
  • 57
  • I already tried this but it didn't change a thing. It's just happening in iphones only. – Rahul Jan 19 '17 at 07:29
  • I just updated with the link of the page where problem is occurring if you want to take a look. – Rahul Jan 19 '17 at 07:47