SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    193
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    best way to call a mobile only stylesheet

    I'm new to mobile development. I'm working on my first mobile site.

    It's responsive, but I'll say the mobile 'version' is waaay different than the desktop/table 'version'. Because they are so different I assume I should make a mobile stylesheet??

    I guess I would want, for example, desktop.css to load at x viewport width and mobile.css to load for mobile devices. So my questions is, what's the best way to load the appropriate stylesheet?

    Sorry if this doesn't make too much sense, I'm brand new to mobile.

  2. #2
    SitePoint Addict Kakarot720's Avatar
    Join Date
    Feb 2001
    Location
    Washington DC
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should Google media queries. That's they way you want to go...

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    First you would need to add the viewport meta tag to tell mobile devices that you are handling the display and then you would use media queries to adjust the display when it no longer fits at a certain size width.

    Read this article for a good overview of one of the best techniques to use. You cater for the design rather than the device because there are so many devices at various widths that it is impossible to make fixed width layouts for each device so you create a fluid layout that goes from large to small and then it fits all devices almost automatically.

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    193
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks all!

    I think this is what i was looking for:
    Code HTML4Strict:
    <link rel="stylesheet" href="styles.css" media="only screen and (max-device-width: 480px)">
     
    <link rel="stylesheet" href="styles_mobile.css" media="only screen and (min-device-width: 480px)">

    Is that an acceptable thing to do? Or is it hacky? For this project, the mobile version is sooooo much different, so I figure it doesn't make sense to server non mobile styles to mobile devices and vice versa.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by sessions View Post
    Thanks all!

    I think this is what i was looking for:
    Code HTML4Strict:
    <link rel="stylesheet" href="styles.css" media="only screen and (max-device-width: 480px)">
     
    <link rel="stylesheet" href="styles_mobile.css" media="only screen and (min-device-width: 480px)">

    Is that an acceptable thing to do? Or is it hacky? For this project, the mobile version is sooooo much different, so I figure it doesn't make sense to server non mobile styles to mobile devices and vice versa.
    Hi,

    Yes you can use those but remember they will be of no use to you without the viewport meta tag I mentioned in my post. You must first have the viewport meta tag before the device will behave properly otherwise it will still be minuscule and shrunk to fit.

    Making a separate mobile stylesheet is generally regarded as not the way to approach this because you are still working with the same html so you will be duplicating lots of stuff if you keep them separate. The browser will download both files anyway even if it only uses one of them.

    Device width will work but you are limiting yourself to a fixed number of devices and there will be loads that you miss. Max-width and min-width media queries focussed on the design and not the device are the better way to handle this and then you cater for all devices automatically if you make the page correctly to start with.

    You shouldn't think of mobile as a separate entity as its really just someone with a smaller viewport so you should make your design fit the whole range on the desktop (open and close the window) and then it will fit all devices as well.

    If I close the window on my desktop browser I don't really want all the content cut off and have to scroll to see it. I would like the content to adapt to the size of my viewport.

    To answer your question yes you can use those stylesheets as long as you have the viewport meta tag in place but expect to miss quite a few devices along the way (not to mention all the various tablet sizes that abound).


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
  •