Thread: Css for mobile

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    1
    Rep Power
    0

    Css for mobile


    Have been trying to make my site accessible to mobile devices. Here's what I tried:

    I linked the html page to stylesheet this way:

    <link rel="stylesheet" href="marlingmobile.css" type="text/css" media="handheld" />

    then created stylesheet with this content:


    @media handheld {

    html, body {
    font: 12px/15px sans-serif;
    background: #fff;
    padding: 3px;
    color: #000;
    margin: 0;
    }
    #topleft, #footer, #col3, #fanlisting, #wall {
    display: none;
    }
    h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    }
    #content img {
    max-width: 250px;
    }
    .center {
    width: 100% !important;
    text-align: center;
    }
    a:link, a:visited {
    text-decoration: underline;
    color: #0000CC;
    }
    a:hover, a:active {
    text-decoration: underline;
    color: #660066;
    }

    }

    Apparently this does not work. Can someone explain what I am doing wrong?

    main stylesheet is linked this way:

    <link href="marling.css" rel="stylesheet" type="text/css" media="screen" />
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    709
    Rep Power
    441
    If you're trying to develop for modern mobile devices like iPhone/Android/etc, they don't use "handheld" stylesheets. That's really meant for older devices.

    For newer devices, you add a meta tag at the top of the page:

    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    This basically says, yep, I'm intentionally designing for mobile devices.

    Then you use media queries to define your styles for mobile devices. This is very similar to what you're doing already. Generally you write queries that say either "apply to screen smaller than this size (max-width)" or "apply to screens larger than this size (min-width)".

    Code:
    @media screen and (max-width: 600px){
    /* styles for screens less than 600px wide here */
    }
    @media screen and (min-width: 600px){
    /* styles for screens wider than 600px here */
    }
    (600px is just an example above, you can put any measurement in there.)

    Most folks recommend designing for mobile first. So you write all the styles that apply to both mobile and desktop, and then use a media query for desktop styles.

IMN logo majestic logo threadwatch logo seochat tools logo