reveal search box

iphone safari font size changes on rotation 30/09/2009

i've been doing some web development targetting iphone, and one of the things you have to learn to support is rotation.

one thing that has annoyed me recently is that when you rotate, the font size changes. google didn't reveal anything, so i thought i'd blog here about it.

if you set:

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

then it will not automatically adjust the fonts of the page when it rotates. the downside of this is that the font size also does not adjust in a regular webkit browser. but if you're targetting iphone specifically, then it is not such a big deal.

add commentAdd a comment
Coca says
8
Wow, It's very useful.
I just found something that I was finding along time.
Thank dude. :D
  • 3 weeks ago (13/01/2012)
Deepak Khedkar says
7
Thanxx bro! thnxx lot
  • 2 months ago (03/12/2011)
nughett says
6
Thanks, helped me a lot.
  • 7 months, 2 weeks ago (19/06/2011)
ed hardy says
5
Also, to get rid of the top shadow on the text inputs for mobile safari, add this to your css.
  • 1 year, 3 months ago (20/10/2010)
Josh J says
4
I was looking for an answer for this for days before I finally stumbled across your blog! Thank you so much!
  • 1 year, 3 months ago (15/10/2010)
Brent says
3
Great thanks !

Also, to get rid of the top shadow on the text inputs for mobile safari, add this to your css.

-webkit-appearance: none;

cheers !
  • 1 year, 11 months ago (11/02/2010)
Alex Shestakov says
2
Very nice!
  • 2 years, 1 month ago (22/12/2009)
Jean says
1
very nice. the changing fonts did annoy me too. thanks for the hint
  • 2 years, 1 month ago (14/12/2009)