Mobile Browsing

Celestial · 06-21-2011, 02:31 AM

I was thinking of making a mobile optimized version of my website but I'm stuck on how the site can tell if it's a mobile device that's browsing, I assume it would be similar to the standard browser IF like:

Code:

<!--[if IE]>Things here.<![endif]-->

So i was just wondering what I would use to make it recognize a mobile browser and if there was a few codes for certain devices such as iPad and Android.

Celestial · 06-21-2011, 04:50 AM

Quote:

Originally Posted by lightways

no i think that could not be possible in mobile phones

It is...

And thank you for all those pointless links.

eberdome · 06-21-2011, 06:49 AM

stick this into your root .htaccess file

Code:

RewriteEngine on
RewriteBase /
RewriteCond %{QUERY_STRING} (^|&)m=0(&|$)
RewriteRule ^ - [CO=mredir:0:www.example.com]
RewriteCond %{HTTP:x-wap-profile} !^$ [OR]
RewriteCond %{HTTP:Profile}       !^$ [OR]
RewriteCond %{HTTP_USER_AGENT} "acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT}  "maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "wapp|wapr|webc|winw|winw|xda|xda-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "up.browser|up.link|windowssce|iemobile|mini|mmp" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "symbian|midp|wap|phone|pocket|mobile|pda|psp" [NC]
RewriteCond %{HTTP_USER_AGENT} !macintosh [NC]
RewriteCond %{HTTP_HOST}          !^m\.
RewriteCond %{QUERY_STRING} !(^|&)m=0(&|$) 
RewriteCond %{HTTP_COOKIE}        !^.*mredir=0.*$ [NC]
RewriteRule ^ http://www.example.com/mobile [R,L]

change www.example.com on Line 4 to your domain name. On the last line, change to your mobile website! Anytime someone views your site from a mobile device they will be forwarded to the domain name you specify on the last line!

Celestial · 07-08-2011, 08:33 PM

Quote:

Originally Posted by eberdome

stick this into your root .htaccess file

Code:

RewriteEngine on
RewriteBase /
RewriteCond %{QUERY_STRING} (^|&)m=0(&|$)
RewriteRule ^ - [CO=mredir:0:www.example.com]
RewriteCond %{HTTP:x-wap-profile} !^$ [OR]
RewriteCond %{HTTP:Profile}       !^$ [OR]
RewriteCond %{HTTP_USER_AGENT} "acs|alav|alca|amoi|audi|aste|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT}  "maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|opwv" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "palm|pana|pant|pdxg|phil|play|pluc|port|prox|qtek|qwap|sage|sams|sany" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|w3cs|wap-|wapa|wapi" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "wapp|wapr|webc|winw|winw|xda|xda-" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "up.browser|up.link|windowssce|iemobile|mini|mmp" [NC,OR]
RewriteCond %{HTTP_USER_AGENT} "symbian|midp|wap|phone|pocket|mobile|pda|psp" [NC]
RewriteCond %{HTTP_USER_AGENT} !macintosh [NC]
RewriteCond %{HTTP_HOST}          !^m\.
RewriteCond %{QUERY_STRING} !(^|&)m=0(&|$) 
RewriteCond %{HTTP_COOKIE}        !^.*mredir=0.*$ [NC]
RewriteRule ^ http://www.example.com/mobile [R,L]

change www.example.com on Line 4 to your domain name. On the last line, change to your mobile website! Anytime someone views your site from a mobile device they will be forwarded to the domain name you specify on the last line!

There appears to be a problem with this code, the site gets stuck on a loop of refreshes from it and I can't work out why. Any help?

Apostropartheid · 07-19-2011, 04:09 PM

No, browser sniffing is an awful, outdated way to do this.

You may provide mobile CSS by using this media query:

Code:

<link media="only screen and (max-device-width: 480px)" href="mobile.css" type="text/css" rel="stylesheet" />

rnd me · 07-31-2011, 08:51 AM

there is special meta for ios devices. many of the same also work on android.
till, these are mostly for decorating shortcuts, except for the scaling markup; it's important to nail for a proper user experience. needless scrolling makes mobile suck.

use special css for mobile and sniff mobile stuff in js using tools like modernizer or ad-hoc detection.

scale back on image use; its cost user's money and slows down the page considerably.
you can clobber any existing background-image urls using more specific selectors to declare background:none; ...

emphasize features of the site that are likely to be used by someone on a small screen or in an on-the-go situation. for example if you're an organization, don't blather about your history on the landing page, throw a menu in my face, preferably something that offers simple single word options like [news, events, search, sections, about]...

bottom line: you don't have as much room to look pretty or do fancy stuff.
people don't want that. they want to get in and out as quickly as possible cause it a PITA using a mobile browser. the less painful you make it, they more they will love you.