Fonts are showing big in ipad , breaking the layout, how to solve this?

Question

I'm Making a website for Desktop+iPad. Site look fine in Desktop browsers including Safari.

but in iPad fonts are big and breaking the layout.

This problem can be solved if i use

body {
    -webkit-text-size-adjust:none;
}

But according to this info http://www.456bereastreet.com/archive/201011/beware_of_-webkit-text-size-adjustnone/ this code applies to Desktop Safari. user in Desktop safari cannot adjust the size which is not good for site's accessibility

is there any other alternative to solve this big text problem in iPad.

Answer 1

Use this instead:

-webkit-text-size-adjust:100%;

Also, make sure you are setting the initial zoom setting to 1 in your viewport meta tag:

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