Login | Register | FAQ
Anonymous

Mobile website page

+ Post a reply

6 posts Page 1 of 1


Mobile website page

by Nilutpal Boruah » Fri May 17, 2013 2:34 pm

I have designed some webpages in my pc.. When I uploaded it into the server,the pages displayed in my mobile browser is same(and large size) and takes time to load that page..even when I reloaded it in the mobile view it gives the same. I want the page to be looked like a mobile website page when I view it in my mobile. How can I do that..? Please help
User avatar

Nilutpal Boruah

  • Posts: 63
  • Joined: Tue May 14, 2013 2:02 pm

Re: Mobile website page

by XainPro » Sat May 18, 2013 11:15 am

well there are 2 ways to do that
1)Create a separate mobile website with small and mobile friendly tables or divs and when user browse from mobile redirect user to your mobile version of website.
2)Build a responsive website with % values in width when user browser from mobile is automatically shrink down to mobile version to do this you need to write dual CSS layout for same divs
there are option in CSS to apply specific CSS when users res is larger then 400px and apply separate CSS when user have res of lower or equal to 400 for more info about responsive layout you can check following link

http://net.tutsplus.com/tutorials/html- ... ual-guide/
User avatar

XainPro

  • Posts: 3567
  • Joined: Fri Feb 17, 2012 8:10 pm

Re: Mobile website page

by Nilutpal Boruah » Mon May 20, 2013 2:31 pm

Which one between the two is mostly recommended? I think the 2nd one,isn't it? So can you please describe a little elaborately the 2nd trick.. I want to do that..
User avatar

Nilutpal Boruah

  • Posts: 63
  • Joined: Tue May 14, 2013 2:02 pm

Re: Mobile website page

by XainPro » Wed May 22, 2013 1:51 pm

here are some of the best tutorials for designing responsive layout the trick i have told you ion 2nd point of my previous answer

http://webdesignerwall.com/tutorials/re ... in-3-steps

http://vandelaydesign.com/blog/web-deve ... sive-site/

http://www.onextrapixel.com/2011/09/12/ ... -template/
User avatar

XainPro

  • Posts: 3567
  • Joined: Fri Feb 17, 2012 8:10 pm

Re: Mobile website page

by Nilutpal Boruah » Fri May 24, 2013 2:14 am

Ok then.. How can I redirect to the mobile website page when its viewed from mobile i.e your first tip?
User avatar

Nilutpal Boruah

  • Posts: 63
  • Joined: Tue May 14, 2013 2:02 pm

Re: Mobile website page

by XainPro » Sat May 25, 2013 10:11 am

there are 2 or 3 methods to redirect a mobile device visitor
1) Javascript

Code: Select all
<script type="text/javascript">
if (screen.width<800) {
window.location="http://yourdomain.com/mobile/";
}
</script>


2)PHP
Code: Select all
<?php 
$useragent=$_SERVER['HTTP_USER_AGENT']; 
if(preg_match('/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))) 
//Redirect URL 
header('Location: mobile.html'); 
?>


3)htaccess file
Code: Select all
#mobile redirect
RewriteCond %{REQUEST_URI} !^/mobile/.*$
RewriteCond %{HTTP_USER_AGENT} "android|blackberry|ipad|iphone|ipod|iemobile|opera mobile|palmos|webos|googlebot-mobile"
[NC]
User avatar

XainPro

  • Posts: 3567
  • Joined: Fri Feb 17, 2012 8:10 pm


+ Post a reply

Page 1 of 1

?>