2

How do I increase the Font size based on the screen size?

I have some text that remains the same size in the iPhone and IPad. I want to increase and/or decrease the Font size based on the screen size.

Leigh
  • 28,765
  • 10
  • 55
  • 103
  • You want to adjudt regarding screen height or screenwidth?? because in android you will have to copute manually – sheetal Jan 23 '13 at 12:18
  • @ sheetal I want to adjust the Size of the font not screen width..based on the screen width font size want to increase or decrease.. –  Jan 23 '13 at 12:41
  • Lots of mobile developers get confuse between viewport-width & device-width . Get you answer from http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html . – user2155906 Apr 15 '13 at 11:58

3 Answers3

3

You should do this using media-queries. e.g.

@media (max-width: 480px) { 
    body { font-size: 1.2em; } /* increase the base font size on landscape phones */
}
Dean
  • 5,884
  • 2
  • 18
  • 24
  • Please accept the answer if it meets your needs. Also note this will only work if you have set a default font-size on the body to begin with. – Dean Jan 23 '13 at 12:37
1

visit this for automatic font streching : Is it possible to dynamically scale text size based on browser width?

Community
  • 1
  • 1
Raja O
  • 634
  • 1
  • 12
  • 33
  • Link only answers are discouraged because links break. Consider updating the answer with a brief summary, so it is still meaningful if the link breaks down the road. – Leigh Apr 15 '13 at 18:05
0

The question up above with the media query (dean) is correct. You also need to make sure for iPhone that you have -webkit-text-size:none - Otherwise iphone will scale fonts, regardless of your font setting.

Also if you want to capture larger phones you may need to modify the query. Especially as we are getting much larger screen smartphones now in the Android market.

imaginethepoet
  • 864
  • 6
  • 14