Picnic Website Code Tutorials

Prevent iPhone IOS From Increasing Text Size Tutorial

12/25/2012

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;
	}
}
		

Need help adding this or other code to your website? Post it here in the forum! Forum

Sponsors

Top Donators

Friends of Mine