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%">

15 comments:

  1. Very informative article.great job

    ReplyDelete
  2. Cool. This was useful - my navigation text kept breaking on my iphone, setting the scaling at 100% seems to have fixed it. Scott

    ReplyDelete
  3. Thank you very much - this is the solution to a problem i have worked on some hours yesterday! :)

    ReplyDelete
  4. How would I enter this if I am using sitebuilder. You can't actually see the code of the page...you can enter HTML only...in the body and after the HEADER tags. Would I just enter this in the body HTML: body style="-webkit-text-size-adjust:none"...Thanks!

    ReplyDelete
  5. Yea... that should work for you.

    ReplyDelete
  6. Engineering is a great profession. There is the satisfaction of watching a figment of the imagination emerge through the aid of science to a plan on paper. Then it moves to realisation in stone or metal or energy. Then it brings homes to men or women. Then it elevates the standard of living and adds to the comforts of life. This is the engineer's high privilege.
    Job oppurnity for nigerian peopole as well as international people, Offshore Engineering Jobs opportunity

    ReplyDelete
  7. GREAT JOB! Thank you very much.

    Does anyone know where to find the current used specs on standard font-size of iOS Safari? I have found a few different once, which do not make sense.

    Cheer.

    ReplyDelete
  8. Helpful post. I like your info. Thanks for sharing. en ucuz iphone

    ReplyDelete
  9. Cool. This is so helpful. Thank you very much for sharing. telekupon

    ReplyDelete
  10. This is one of my favorite topics in engineering systems design (they don’t call me the “Energy Zarr” without reason). In fact, I often rant about waste in solving a problem with brute force. Now… with that said, sometimes a hammer is more effective when dealing with a nail, but in general, what goes in, must come out… and most of what comes out is heat. Take the quintessential LCD display like the 60” version sitting in your living room. That beauty has white LEDs for a back-light so it must be “green” right? Well, did you know that up to 80% of the light emitted by those LEDs is absorbed by the color filters on the LCD glass? It might be “thin” but it is definitely not efficient with the back-light energy. Technologies such as OLED or Sequential Frame LCD (SFLCD) do not use filters. OLEDs are self emitting and draw zero power when off. SFLCD technology still uses a back-light, but they are RGB LEDs. Each color frame (red, green, blue) is switched at such a high speed that the eye integrates the image into the proper colors. Each pixel is now larger and brighter with less power. How much less? Try 80 watts for an SFLCD TV versus 350 watts for the traditional LCD. Energy currently is a limited resource, so innovate where you can to save it.
    https://vimeo.com/96057624

    ReplyDelete
  11. I remember talking with the late Bob Pease about the state of the art in digital techniques for solving complex problems. He politely let me babble for a few minutes and then laughed, “Yep, I solved that same problem 10 years ago with two op-amps”. I wanted to crawl under something, but his office was completely full of every magazine he had ever received… but that’s another story. He was correct – sometimes a straight forward analog solution can not only be the most elegant, but also the most efficient. Sometimes you need the power of a DSP processor when systems are non-linear or the signal processing is not realizable in the analog domain. However sometimes simple analog circuitry can solve the problem. Don’t forget your roots.
    http://tmblr.co/ZQYN-o1GYynFP

    ReplyDelete