How to Programmatically Control iPhone Font Sizes

Many CSS3 properties are available for you to use in Safari on the desktop and iPhone OS. CSS properties that begin with -webkit- are usually proposed CSS3 properties or Apple extensions to CSS.

Adjusting the text size is important so that the text is legible when the user double-taps. If the user double-taps an HTML block element—such as a <div> element—then Safari on iPhone OS scales the viewport to fit the block width in the visible area. The first time a webpage is rendered, Safari on iPhone OS gets the width of the block and determines an appropriate text scale so that the text is legible.

If the automatic text size-adjustment doesn’t work for your webpage, then you can either turn this feature off or specify your own scale as a percentage. For example, text in absolute-positioned elements might overflow the viewport after adjustment. Other pages might need a few minor adjustments to make them look better. In these cases, use the -webkit-text-size-adjust CSS property to change the default settings for any element that renders text.

In addition to controlling the viewport, you can control the text size that Safari on iPhone OS uses when rendering a block of text.

To turn automatic text adjustment off, set -webkit-text-size-adjust to none as follows:

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

To change the text adjustment, set -webkit-text-size-adjust to a percentage value as follows, replacing 200% with your percentage:

html {-webkit-text-size-adjust:200%}

Setting the text size adjustment property:

<body style="-webkit-text-size-adjust:none">
<table style="-webkit-text-size-adjust:auto">
<div style="-webkit-text-size-adjust:200%">
Advertisements
Published in: on February 24, 2011 at 6:59 pm  Comments (3)  

The URI to TrackBack this entry is: https://blackbeltreview.wordpress.com/2011/02/24/how-to-programmatically-control-iphone-font-sizes/trackback/

RSS feed for comments on this post.

3 CommentsLeave a comment

  1. […] rest is here: How to Programmatically Control iPhone Font Sizes « Black Belt Review Related Posts:iPhone and XML – iPhone Dev SDK Forum Hi! First of all I'd like to excuse my […]

  2. […] are available for you to use in Safari on the desktop and iPhone OS. View original post here: How to Programmatically Control iPhone Font Sizes « Black Belt Review Tags: -webkit-are, available-for, begin-with, css, programmatically, properties-are, […]

  3. Very good posting, I am checking back again on a regular basis to hunt for fresh news.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: