Prevent iPhone IOS From Increasing Text Size Tutorial
The working Demo is the two <p> tags below...
<p>This paragraph tag HAS the code applied to it. It WILL NOT enlarge on the iPhone.</p>
<p>This paragraph tag DOES NOT have the code applied to it. It WILL enlarge one the iPhone.</p>
@media (max-device-width:320px) {
#nav {
-webkit-text-size-adjust:none;
}
}
If you want to prevent ios iPhone from increasing text size it's better to target only iPhone with the code above. If you just feed a blanket rule to all browsers then Chrome and Safari (full size) will also prevent the text from increasing on zoom - you don't want that. I find on my iPad that it doesn't increase font size. If you happened to see different then you could use this following rule instead to target both...
@media (min-device-width:320px) and (max-device-width:768px) {
#nav {
-webkit-text-size-adjust:none;
}
}
