Welcome to WebmasterWorld Guest from 50.17.74.162

Forum Moderators: not2easy

Message Too Old, No Replies

What's the best way to target mobiles, with CSS?

     

londrum

1:27 pm on Jul 27, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



I kind of hijacked another thread asking this question (here [webmasterworld.com]... so I thought i'd ask it properly in its own thread.

i've only just started thinking about amending my CSS for mobiles and tablets, and i thought it would be a lot easier than it actually is. given how popular mobiles and tablets are these days, i cant believe there is not a clear-cut way to target them.

the solutions i have seen on the web either talk about checking user_agents or comparing the resolutions. but tablets these days have resolutions that compare with desktops, so that isn't ideal. and the only script i've come across that checks user_agents is too long (there's just too many. somebody said you should just check the obvious ones like android, iPhone etc, or check for the word 'mobile', but i'd rather have a solution that takes into account the whole lot.

this is what i'm using at the moment... i am not bothering to target tablets in landscape mode, because i can get away with using my normal site

/* Smartphones and tablets (portrait mode only) ----------- */

@media only screen and (min-device-width:320px) and (max-device-width:1024px) and (orientation:portrait) {}


/* Smartphones (portrait and landscape modes) ----------- */

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


i know that this is very far from being perfect. so i was wondering how other people go about doing it.

drhowarddrfine

5:30 pm on Jul 27, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Give up. You can't. At least not reliably. Concentrate on getting your contents to adjust to any size, not devices. That's the only way.