Grow your CSS skills. Land your dream job.

How to create responsive design only for mobile devices not for Tablet/tabs like iPad etc??

  • # December 18, 2012 at 11:07 pm

    HI,

    Can anybody tell me that How to create responsive design only for mobile devices not for Tablet/tabs like iPad etc??

    # December 18, 2012 at 11:17 pm

    That’s not what responsive design is about. Responsive design is creating websites that look good regardless of device, from iMac down to tiny phones.

    You could do media queries just for mobile but then you’re kind of defeating the point and why ignore all those tablet/small screen users?

    What you’re basically asking is how to create mobile sites, the answer to that is to use PHP (or other) to redirect traffic to a mobile sub domain or folder.

    # December 18, 2012 at 11:22 pm

    If I understand your question? Your media query screen max-width should be 480px since tablets screen sizes are usually over 1000px.

    # December 18, 2012 at 11:25 pm

    You should consider @andy_unleash comments tho.

    # December 19, 2012 at 4:25 pm

    If you’re using responsive techniques (such as Philben suggested) then Tablets will get the desktop layout for better or worse. I have to ask WHY you want to ignore Tablets, as it’s not that much more work to implement. Trying to ignore them would be a lot more work as you would be using adaptive techniques to design a mobile layout and a desktop layout and then try to sniff for only those devices.

    Hmmm… after re-reading your post, are you trying to make a mobile only site? Either way what are you going to do with visitors that are not mobile or mobile/desktop? Or have you already got the “desktop” site done. In that case I would do as andy said above and use a framework like jquery-mobile or Sencha so that the mobile site is as cross-device compatible as possible.

    # December 20, 2012 at 6:48 am

    I think Mr. Akash want compatibility only for mobile devices, not for ipad

    # December 20, 2012 at 7:35 am

    Obviously, but why ignore tablet users? That’s potentially a huge market, optimising sites for tablet is the only smart move.

    # December 20, 2012 at 11:07 am

    I would argue that iPad falls in the “mobile” category as well.

    A site can not behave differently based on the criterium “mobile” or “tablet”, since those are subjective terms.
    A site CAN behave differently based on objective terms, such as screen width, device width, browser type/version, OS, etc.

    It all starts with the question what defines mobile for you, and based on that you’ll have to create your rules that result in showing a mobile site, or “regular” site.

    # December 20, 2012 at 4:37 pm

    I’ve really wondered why iPad falls into “mobile”. 960 wide fits iPad perfectly and behaves pretty much like a desktop environment except for watching out for things like how dropdowns work.

    7″ tablets begin the real “mobile” experience in my opinion. It shows because a ton of websites really suck on my nexus 7 :P

    # December 20, 2012 at 5:03 pm

    still, in answer to @akash s question. . .
    use a media query like:

    @media handheld, only screen and (max-width: 767px) {

    body {
    /* responsive stuff / percentage based layout in % goes here */
    }

    and why you would like to do that? who noooooes.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".