CODEWITHSUNDEEP
.htaccessurljquery-mobilehttp-redirectmobile
Cbass
Cbass

Reputation: 1

Redirect a specific url but only on mobile or certain screen sizes

Ok so here is the issue. I use a cms to run a ecommerce website. It uses a mobile site addon when the user is on a phone or ipad. I want to redirect a specific url, but only when in mobile. I would like to keep the url the same for desktop.

example:

Redirect /desktop-categories/ site.com/mobile-categories

How do I do this and specify to only redirect when user is on mobile?

Upvotes: 0

Views: 3581

Answers (1)

Cristian A. Rodríguez Enríquez
Cristian A. Rodríguez Enríquez

Reputation: 107

First you'll need to determine if their browser is a web browser on a mobile device or not. Because mobile phones typically have a small screen width, you can redirect visitors to your mobile site if they have a screen width of less than or equal to 800 pixels.

Javascript window.location Method 1

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

You can use a .htaccess redirect to transfer visitors based upon the MIME types the browser supports. For example, if the user's browser accepts mime types that include WML (Wireless Markup Language), then most likely it is a mobile device.

.htaccess URL rewrite redirects 1

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]

Redirecting Mobile Users by Screen Size Instead of Device Type 2

var Responsive = {
    maxPhoneWidth: 775,
    maxTabletWidth: 925,

    //REDIRECT BASED ON CONFIGURABLE MAX WIDTH THRESHOLD
    maxWidthRedirect: function (maxWidth, url) {
        var viewport = this.getWindowSize();

        //ADD EXCLUSION IN HASH IN CASE DESKTOP VIEWING IS INTENDED
        if (window.location.hash != '#desktop' && viewport.width < maxWidth)
            window.location.href = url;
    },

    //REDIRECT BASED ON RECOMMENDED PHONE WIDTH THRESHOLD
    mobileRedirect: function (url) {
        this.maxWidthRedirect(this.maxPhoneWidth, url);
    },

    //REDIRECT BASED ON RECOMMENDED TABLET WIDTH THRESHOLD
    tabletRedirect: function (url) {
        this.maxWidthRedirect(this.maxTabletWidth, url);
    },

    //DETERMINE CROSS-BROWSER SCREEN SIZE
    getWindowSize: function () {
        var w = window,
            d = document,
            e = d.documentElement,
            g = d.getElementsByTagName('body')[0],
            x = w.innerWidth || e.clientWidth || g.clientWidth,
            y = w.innerHeight || e.clientHeight || g.clientHeight;

        return { width: x, height: y };
    }
};

You can see the code in action at the following link and trying different browser sizes.

References

  1. How to redirect your website to its mobile version

  2. Redirecting Mobile Users by Screen Size Instead of Device Type

Upvotes: 1

Related Questions