device-sniffing -- different screen dimensions...

[maya90]

hi,

I'm fairly new to mobile development.. and have discovered this interesting thing: for apple devices it's very easy to distinguish betw iPhone and iPad (so you can very easily style differently for these two devices/screen dimensions); but the Android, as far as I know, covers both the smart phone and the tablet(s) right?? so is there a way to detect, when on Android, whether it's the phone or the tablet? (testing for screen dimensions can be tricky, I suppose, since you don't know whether user has it portrait or landscape... )

so the "Android" user-agent covers devices of different dimensions (and I don't know how many Android tablets there are, if there is more than one Android tablet screen-dimension.. and if all the Android phones have the same screen-dimensions...)

also: is there a way to easily test for whether iPad is traditional iPad or the new one?

(oh brother, this is getting out of hand.... ;-)

thank you....

[ralph.m]

Just to clarify, to what end are you trying to determine this? If it's just for styling purposes (i.e. CSS) you can do this with media queries. But I suspect that's not the aim here.

[maya90]

well yes it IS about styling.. (and about determining what content I include in some cases..)

ok, I guess I need to look @ media queries, it's just that media queries confuse me a bit... for example, just found this pg,
http://cssmediaqueries.com/

example:
@media screen and (max-device-width : 320px)

here you're saying do this for this-and-this dimension, but I was hoping for a way to autom. detect the dimension...

it's not possible to more specifically detect devices? ok, I guess my questions is weird.. but well, on this page, http://cssmediaqueries.com/ there's nothing about Android, and also, it looks like you have to do diff media queries for whether portrait or landscape (and how does CSS detect when you chng orientation? )

let us say I want different style (diff size) buttons for phones and tablets.. how would I do this with media queries (or any other way)? I guess the gist of my question then is:

is there way to simply detect whether you're on a phone or tablet?? this is mainly what I want to be able to do...

thank you........

[ralph.m]

example:
@media screen and (max-device-width : 320px)

here you're saying do this for this-and-this dimension, but I was hoping for a way to autom. detect the dimension...

Basically, you set different rules for various elements depending on the width of the screen. There are other ways to detect screen size, with server-side technologies or JS—which is what the real meaning of the word 'browser sniffing', as I understand it. Those techniques can be tricky to maintain, though, as the rules keep changing, and devices can pretend to be something other than they actually are. But certainly, some developers prefer this approach. I'll leave it to others to suggest links to that sort of thing, though.

there's nothing about Android, and also, it looks like you have to do diff media queries for whether portrait or landscape (and how does CSS detect when you chng orientation? )

Yes, each device has its own 'break points' or set dimensions, but you can check on these. For example, if designing for iPhone, it's well know that to target portrait you work within a width of 320px and in landscape a width of 480px ... and I think it's the same for Android phones, but don't quote me on it.

let us say I want different style (diff size) buttons for phones and tablets.. how would I do this with media queries?

For the phones, you'd put your styles inside this block:

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
  .button { ... }
}

and for tablets:

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
  .button { ... }
}

You could also specify whether the phones/tablets are landscape or portrait, too.

there's no way to simply detect whether your're on a phone or tablet??

The styles above will do that.

[maya90]

ok.. that's what I wanted.. thank you...

will go to a friend's house this afternoon to test on an iPad.. can't test on Android phone or tablet, but well, one thing at a time... ;-)


thank you very much...

[maya90]

oh brother.. have another prob now....

the buttons have long-ish text.. so for iPhone there's a <br /> in them, but for tablets I need to eliminate the <br /> in the buttons... yiiiiiikes......

how on earth can I do that?? I could do sniffing on the back-end, but again, and going back to my OP, user-agent sniffing that distinguishes betw phone and tablet can only be done for mac devices (iPhone, iPad..) for Android, user-agent is the same for phone and tablet..

meaning: great that you can distinguish betw phone & tablet in CSS, but what for the markup??? yikes...

this is a HUGE pain...

any suggestions would be appreciated....

[ralph.m]

Probably a better solution would be to put spans around each bit of text, and for iPhones, set the spans to display: block so that they each have their own line. On other devices, they will do nothing.

So for smart phones, it would be

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  span {display: block;}
}

But if you want to stick with the breaks (not recommended, as they will affect all devices) you could just do this for devices where you don't want them to appear:

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  br {display: none;}
}

But using HTML for visual styling is a bad idea, except perhaps for things like addresses and poems.

[maya90]

thank you... actually that prob was solved, in iPhone it wrapps the way I want it w/o <br /> tag... ;-)


but I have another prob:

for iPhone, since space is so small, am abbreviating one button ("Empl History" instead of "Employment History", but obviously for tablets don't want to do that... )

oh brother.... this is not good... I really really wish these google people had thought this over better and had provided different user-agent values for their phones and tablets...

[ralph.m]

am abbreviating one button ("Empl History" instead of "Employment History", but obviously for tablets don't want to do that... )

Same deal as above:

<p>Empl<span>oyment</span> History</p>

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  p span {display: none;}
}

[maya90]

awesome!! great idea.. thank you....

(need to make sure I have no white space in there... ;-)

[maya90]

I have one more question:

[stupid question : REMOVED ]

(can you remove your own posts in Sitepoint ????)


ok, got all my phone-vs-tablet stuff done..

thank you very very much for all your help, Ralph.... I learned a lot... :-)

[ralph.m]

No worries. Glad to have helped.

can you remove your own posts in Sitepoint ?

No, but you can make edits for up to half an hour after posting. If people were able to delete posts, threads would get messed up badly and would often not make sense.