Wednesday, July 22, 2009

Stop adjusting the text size in iphone when you Rotate the Screen

There are many CSS3 properties 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%">