SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    legible on mobile?

    Hi - I've just discovered that my site doesn't have "responsive design." I viewed it in safari on iphone and the text is tiny. Is there a meta command I can use to tell it to display a bigger font size on mobile devices? So instead of displaying the page as is, it displays scrolling text, so user does not have to use horizontal scroll to read bigger font?

    The meta I have now is:
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    The site is http://www.greensmoothie.com/

    Another site - http://drivingtraffic.com/ - claims they have responsive design although I wasn't too impressed because their subscribe button at the top right drops into the middle of the page on an iphone. But their text is bigger than mine on an iphone!

    thank you, Val

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi Val. One thing you could do for devices like the iPhone is add this to your style sheet:

    Code:
    @media only screen
    and (min-width : 320px)
    and (max-width : 480px) {
    	body {font-size: 150%;}
    }
    It may have other, unforeseen effects, but they can be dealt with. Give that a go and see what you find.

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh dear I tried that but it has no effect on either desktop (good!) or iphone. I really hope I find a simple solution to this!

  4. #4
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,480
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The problem is that your font sizes are declared in pixels, eg font-size:12px; instead of using % or EM. If you replace with % your text will be scalable.

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Singapore
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Val,

    Here's where I think the problem lie. Give it a try and let me know if it helps.

    If your iPhone is iPhone 4 or newer, you'll run into some problems with the using just media queries to change text sizes. This is because iPhone 4 and above have a "higher resolution" screen. Meaning to say 1px on the desktop doesnt equate to 1px on the phone. The actual iPhone 4 dimensions would be 640 x 960 instead of the usual 320 x 480 in the iphone 3.

    There's one way to fix this though, and that is to set the viewport initial scale to 1.

    Here's the code you have to place in the head of your HTML file.

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    If it doesn't work with this alone, try it together with ralph's suggestion and see how it goes.

    Hope this helps!

    Zell.

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you! I'll play with this. I discovered there's a reader button in the browser bar of the iphone 4. When I click that, the page is displayed as scrolling text within the iphone window (like an sms msg) - and user can choose text size (it's pretty big by default). Which is exactly what I need. Then I can go back to page view and in the menu section just zoom in with my fingers so that the links are big and easy to navigate.

    I'm guessing android also has this "reader" function. So "responsive design" doesn't seem needed when it's already built into the phone technology.

    On iphone that reader button is only displayed on my css pages. On my old tables pages - e.g. http://www.greensmoothie.com/eat/healing.php - I have to zoom in and horizontally scroll so at some point in nevernever land and nevernevertime, gonna have to upgrade the entire site to css...

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Singapore
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use an iPhone and I have no idea wheres the reader function! Learnt something new today

    Then again, most people don't know about the reader function, so try your best to style it nicely on first glance if possible. You only have a chance to make the first impression!

    Do note that viewlikeus wont work like it should if you're using the meta tag I gave you.

    This can be a good alternative instead:
    http://mattkersley.com/responsive/

  8. #8
    SitePoint Evangelist
    Join Date
    Jul 2008
    Location
    Port Elizabeth, South Africa
    Posts
    408
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you! Yes the reader button is right there in the browser windowbar...


Tags for this Thread

Bookmarks

Posting Permissions

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