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

[akash]

HI,

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

[Andy Howells]

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.

[Philben]

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

[Philben]

You should consider @andy_unleash comments tho.

[lenzjo]

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.

[nik_013]

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

[Andy Howells]

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

[Senff]

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.

[sluggern]

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.

[Author]

Posts