+ Post New Thread
Results 1 to 4 of 4
Web Development Thread, Website appearance on iPhone in Coding and Web Development; Hi All, Sorry, another question about my new website! Does anyone have much knowledge of how an iPhone renders text ...
  1. #1

    Join Date
    May 2007
    Location
    Kent
    Posts
    127
    Thank Post
    39
    Thanked 12 Times in 11 Posts
    Rep Power
    28

    Website appearance on iPhone

    Hi All,

    Sorry, another question about my new website!

    Does anyone have much knowledge of how an iPhone renders text on a webpage? I realise that the screen size is a lot smaller, but I would have thought that the easy zooming capabilities would mean that it should render text in exactly the same way as a desktop browser, however, I seem to get far fewer words per line when my website is displayed on the iPhone. See attached screenshot:



    And this messes up my layout! I know that my layout should be able to dynamically cope with this, but I'm still learning CSS. Is there a way to force the way the text is rendered so that I get the same number of words per line on any device?

    At the moment I'm using the "em" method of font sizing. Should I use normal font sizes instead?

    Here is a link to the website so you can see how it renders in a normal browser.

    Thanks.

  2. #2
    Marci's Avatar
    Join Date
    Jun 2008
    Location
    Wakefield, West Yorkshire
    Posts
    896
    Thank Post
    84
    Thanked 235 Times in 194 Posts
    Rep Power
    82
    you need to add some empty divs as spaceholders using clear:both css to avoid it ovelapping stuff when the res gets lowered (eg: bottom of your main block before the separating line above the two big pics), but yes, fixed font sizes should also help... or a body font size fixed, then everything else using percentage...

  3. #3

    Join Date
    May 2007
    Location
    Kent
    Posts
    127
    Thank Post
    39
    Thanked 12 Times in 11 Posts
    Rep Power
    28
    Thanks for the suggestions. I fiddled around with this for hours but couldn't get it to look right. However, I did stumble accross the solution:

    Add this to the CSS and it fixes the layout:

    -webkit-text-size-adjust: none;

    Unfortunately it won't validate, but it does the job. It basically turns off the text rescaling options on the iPhone and other webkit browsers.

  4. #4
    p858snake's Avatar
    Join Date
    Dec 2008
    Location
    Queensland
    Posts
    1,490
    Thank Post
    37
    Thanked 175 Times in 151 Posts
    Blog Entries
    2
    Rep Power
    51
    Quote Originally Posted by mitchell1981 View Post
    Thanks for the suggestions. I fiddled around with this for hours but couldn't get it to look right. However, I did stumble accross the solution:

    Add this to the CSS and it fixes the layout:

    -webkit-text-size-adjust: none;

    Unfortunately it won't validate, but it does the job. It basically turns off the text rescaling options on the iPhone and other webkit browsers.
    That is because -<VENDOR>-<OPTION>: are vendor specific and not part of the w3c specs or are working versions of the draft specs. So it's perfectly alright to not have them validating.

SHARE:
+ Post New Thread

Similar Threads

  1. Editing appearance of main menu
    By bonjour in forum EduGeek Joomla 1.5 Package
    Replies: 4
    Last Post: 12th October 2009, 10:45 PM
  2. display a website within another website
    By RabbieBurns in forum Web Development
    Replies: 14
    Last Post: 24th July 2009, 06:25 PM
  3. [CLOSED] Bug/Error: Dodgy font appearance (OpenSolaris 2008.11/Firefox)
    By Ric_ in forum EduGeek.net Site Problems
    Replies: 1
    Last Post: 18th May 2009, 02:07 AM
  4. iPhone
    By mattx in forum General Chat
    Replies: 49
    Last Post: 5th July 2007, 02:27 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •