Search code examples
androidhtmliphonemeta

How to use a meta-redirect for user agent on mobile

I'd like to detect when a user hits a webpage through a mobile (Android or Iphone) device, and set up a redirect to the relevant app-store when that connection is detected.

How would one go about implementing this?

Thanks

Solution

  • I wouldnt go with a user agent redirect if other options are available. Heres a list of options on google devlopers site, and why user agents arnt so great https://developers.google.com/webmasters/smartphone-sites/redirects There are a few ways to do this, the easiest way to accomplish your redirect is :

    Javascript Method:

    <script type="text/javascript">
  <!--
  if (screen.width <= 800) {
    window.location = "http://m.domain.com";
  }
  //-->
</script>

    NOTE

    You'll need to play around with different resolutions to redirect,

    1. based on if the user is in landscape etc...
    2. for different phones

    You'll also want to include your Meta tag

    <meta name="viewport" content="width=device-width, initial-scale=1">

    This means that the browser will render the width of the page at the width of its own screen.

    OR

    .htaccess Method:

        RewriteEngine On
# Check for mime types commonly accepted by mobile devices
RewriteCond %{HTTP_ACCEPT} "text\/vnd\.wap\.wml|application\/vnd\.wap\.xhtml\+xml" [NC]
RewriteCond %{REQUEST_URI} ^/$
RewriteRule ^ http://m.domain.com%{REQUEST_URI} [R,L]

    Here is a link to CSS Tricks explaining different Meta Tags : > CSS Tricks Responsive Meta Tags

    i'll also add that with the frameworks available today most sites can accommodate desktop and mobile all in one.

    Checkout Twitter Bootstraps setup for mobile... easy to use and works great. http://getbootstrap.com/