Welcome to WebmasterWorld Guest from 54.226.133.245

Forum Moderators: not2easy

Message Too Old, No Replies

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

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 12, 2006
posts:2493
votes: 22


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.
5:30 pm on July 27, 2013 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 0


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.