SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mobile device stylesheets

    Hi I wonder if anyone can help.

    I would really like to make my website more accessible to those who use mobile devices. Although I code to W3C standards I have noticed that some mobile devices don't render my pages propertly.

    For example, IE browsers show a long vertical scroll before showing any content.

    After brainstorming I came up with 3 solutions:

    1. Use a mobile URL to set a cookie and apply a simplified stylesheet
    2. Simpilify the stylesheet for everyone
    3. Use JS to detect the screen res and apply a simplified stylesheet for resolutions less than 320px.

    I really need to assess the pros and cons of each solution before I make a decision.

    Could anyone help with this initial assessment.

    Thanks for your help.

    Steven

  2. #2
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or (another possible alternative) you could add a handheld stylesheet with a simplified layout to your "normal" site:

    Code:
    <link rel="stylesheet" href="css/mobile.css" type="text/css" media="handheld" />
    I wouldn't rely on Javascript for anything to do with handhelds because as far as I know it's support is patchy.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  3. #3
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I am not sure the handheld media type is well supported by mobiles.

    I was trying to do use JS to test the screen resolution and only apply the enhanced design (e.g. for PCs) if the screen size is over 320px, but I can't get it to work.

    Something like:

    <script type="text/javascript">
    function include_stylesheet() {
    if (document.body.clientWidth > 320) {
    document.write("<link href=\"_design/screen.css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen, projection\" />");
    }

    }

    include_stylesheet();
    </script>

    Any ideas


    Thanks
    Steven

  4. #4

  5. #5
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any idea how to make my function dynamic e.g. to change when the browser resizes (without needing a refresh)?

    Thanks
    Steven

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    This article might help.

    http://www.themaninblue.com/experime...olutionLayout/

    Hi, I am not sure the handheld media type is well supported by mobiles
    From what I've read javascript is supported by even less devices so I don't think its a reliable option.

    Mind you I don't even own a mobile phone so I haven't really looked into this


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
  •