Scripts

Making your blog display more mobile friendly

12/31/09

09:26:57 pm, by dave

, 530 words, 1374 views

Categories: Web Technologies, PHP

Making your blog display more mobile friendly

After adding the twitterlution plugin to my blog, I thought it would be a good idea to make the blog a little more mobile friendly. So after doing some research, I came across Mike Industries' post about making your site mobile friendly and Lightweight Device-Detection in PHP post.

After some creative combining, I have updated this blog to display in a different format if you access the blog from a mobile device. I know that the site is much more lightweight now, but the format needs tweaked to be more usable. That being said, here is what I did.

[More:]

I started with the sample provided by Mike Industries and pretty much followed it exactly as described in the post. Then added this code snippet from Lightweight Device-Detection in PHP post

PHP:

	`function is_mobile(){`
	`$regex_match="/(nokia\|iphone\|android\|motorola\|^mot\-\|softbank\|foma\|docomo\|kddi\|up\.browser\|up\.link\|";`
	`$regex_match.="htc\|dopod\|blazer\|netfront\|helio\|hosin\|huawei\|novarra\|CoolPad\|webos\|techfaith\|palmsource\|";`
	`$regex_match.="blackberry\|alcatel\|amoi\|ktouch\|nexian\|samsung\|^sam\-\|s[cg]h\|^lge\|ericsson\|philips\|sagem\|wellcom\|bunjalloo\|maui\|";`
	`$regex_match.="symbian\|smartphone\|midp\|wap\|phone\|windows ce\|iemobile\|^spice\|^bird\|^zte\-\|longcos\|pantech\|gionee\|^sie\-\|portalmmm\|";`
	`$regex_match.="jig\s browser\|hiptop\|^ucweb\|^benq\|haier\|^lct\|opera\smobi\|opera\mini\|320x320\|240x320\|176x220";`
	`$regex_match.=")/i";`
	`return isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE']) or preg_match($regex_match, strtolower($_SERVER['HTTP_USER_AGENT']));`
	`}`

to the global_prepend.php file and then I updated the callback function to use the mobile detection and handle any calls to the site without the www.

PHP:

	`<?php`
	`# from <a href="http://www.mikeindustries.com/blog/archive/2005/07/make-your-site-mobile-friendly">http://www.mikeindustries.com/blog/archive/2005/07/make-your-site-mobile-friendly</a>`
	`function callback($buffer) {`
	`if(( $_SERVER['SERVER_NAME'] == 'mobile.sitename.com' ) \|\| ( is_mobile())) {`
	`$buffer = str_replace('http://www.sitename.com', 'http://mobile.sitename.com', $buffer);`
	`$buffer = str_replace('http://sitename.com', 'http://mobile.sitename.com', $buffer);`
	`$buffer = preg_replace('/[\n\r\t]+/', '', $buffer);`
	`$buffer = preg_replace('/\s{2,}/', ' ', $buffer);`
	`$buffer = preg_replace('/(<a[^>]>)(<img[^>]+alt=")([^"])("[^>]*>)(<\/a>)/i', '$1$3$5', $buffer);`
	`$buffer = preg_replace('/(<link[^>]+rel="[^"]stylesheet"[^>]>\|<img[^>]>\|style="[^"]")\|<script[^>]>.?<\/script>\|<style[^>]>.?<\/style>\|<!--.*?-->/i', '', $buffer);`
	`$buffer = preg_replace('/<\/head>/i', '<meta name="robots" content="noindex, nofollow"></head>', $buffer);`
	`}`
	`return $buffer;`
	`}`

	`# from <a href="http://mobiforge.com/developing/story/lightweight-device-detection-php">http://mobiforge.com/developing/story/lightweight-device-detection-php</a>`
	`function is_mobile(){`
	`$regex_match="/(nokia\|iphone\|android\|motorola\|^mot\-\|softbank\|foma\|docomo\|kddi\|up\.browser\|up\.link\|";`
	`$regex_match.="htc\|dopod\|blazer\|netfront\|helio\|hosin\|huawei\|novarra\|CoolPad\|webos\|techfaith\|palmsource\|";`
	`$regex_match.="blackberry\|alcatel\|amoi\|ktouch\|nexian\|samsung\|^sam\-\|s[cg]h\|^lge\|ericsson\|philips\|sagem\|wellcom\|bunjalloo\|maui\|";`
	`$regex_match.="symbian\|smartphone\|midp\|wap\|phone\|windows ce\|iemobile\|^spice\|^bird\|^zte\-\|longcos\|pantech\|gionee\|^sie\-\|portalmmm\|";`
	`$regex_match.="jig\s browser\|hiptop\|^ucweb\|^benq\|haier\|^lct\|opera\smobi\|opera\mini\|320x320\|240x320\|176x220";`
	`$regex_match.=")/i";`
	`return isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE']) or preg_match($regex_match, strtolower($_SERVER['HTTP_USER_AGENT']));`
	`}`

	`ob_start("callback");`
	`?>`

Hopefully you all find this helpful.

Cheers,
Dave

Did you like this post? If so, Share it!

Pingbacks:

No Pingbacks for this post yet...

This post has 5 feedbacks awaiting moderation...

This is somewhere I can post interesting snippets as I come across them. Hopefully some folks out there will find this helpful.

Search

Follow Me:

Twitter
RSS 0.92: Posts, Comments
RSS 1.0: Posts, Comments
RSS 2.0: Posts, Comments
Atom: Posts, Comments

Amazon.com Widgets

	`function is_mobile(){`
	`$regex_match="/(nokia\|iphone\|android\|motorola\|^mot\-\|softbank\|foma\|docomo\|kddi\|up\.browser\|up\.link\|";`
	`$regex_match.="htc\|dopod\|blazer\|netfront\|helio\|hosin\|huawei\|novarra\|CoolPad\|webos\|techfaith\|palmsource\|";`
	`$regex_match.="blackberry\|alcatel\|amoi\|ktouch\|nexian\|samsung\|^sam\-\|s[cg]h\|^lge\|ericsson\|philips\|sagem\|wellcom\|bunjalloo\|maui\|";`
	`$regex_match.="symbian\|smartphone\|midp\|wap\|phone\|windows ce\|iemobile\|^spice\|^bird\|^zte\-\|longcos\|pantech\|gionee\|^sie\-\|portalmmm\|";`
	`$regex_match.="jig\s browser\|hiptop\|^ucweb\|^benq\|haier\|^lct\|opera\smobi\|opera\mini\|320x320\|240x320\|176x220";`
	`$regex_match.=")/i";`
	`return isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE']) or preg_match($regex_match, strtolower($_SERVER['HTTP_USER_AGENT']));`
	`}`

Making your blog display more mobile friendly

12/31/09

Making your blog display more mobile friendly

Pingbacks:

Scripts

Search

Follow Me:

Categories

Archives

Misc

Who's Online?