Skip to main content
Log inGet free account
Last Reviewed: August 01, 2022

Mobile Redirection with Cloudflare

Learn how to use Cloudflare to set up mobile redirection on your Drupal or WordPress site.

Discuss in Slack
Edit this page on GitHub Report an issue with this doc

Cloudflare's mobile redirect service is available to domains hosting DNS on any of their plans. For details, see About Cloudflare Mobile Redirect.

Before You Begin

Be sure that you have:

  • A registered domain name with DNS hosted on Cloudflare.
  • Added the domain to your site's Live environment on Pantheon.
  • Configured mobile-ready pages (some themes already provide mobile stylesheets).
Note

The following instructions will enable automatic redirects for the domain associated with the site's Live environment. To test redirects on another environment, add a subdomain (for example, m-test.example.com) to the Test environment and configure the subdomain on Cloudflare with the provided DNS records.

Considerations

We recommend handling mobile detection using Responsive Web Design (RWD) techniques to avoid compromising potential scalability. Creating separate mobile URLs greatly increases the amount of work required to maintain and update your site and introduces possible technical problems. For details, see Caching: Advanced Topics.

Add the Mobile Domain to Live

  1. Go to the Live environment on your Site Dashboard, and select Domains/HTTPS.

  2. Add the domain you intend to use for the mobile-optimized site (for example, m.example.com). Take note of the recommended DNS records for the subdomain.

Enable Mobile Redirection on Cloudflare

  1. Log in to your Cloudflare account.

  2. Go to the domain you want to set up a mobile redirect for.

  3. Click the DNS icon at the top of the page.

  4. Configure your mobile domain (for example, m.example.com) as a subdomain using the recommended DNS records from Pantheon.

  5. Click the Speed icon at top of the page, and scroll down to the Mobile Redirect section.

  6. Set up the mobile domain as needed. There are two options:

    • Drop Path: redirects all mobile requests to your mobile-optimized website homepage.
    • Keep Path: redirects all mobile requests to the same resource hosted on your mobile-optimized website.

  7. Allow the changes to propagate, then test the redirect on a mobile device. The request should redirect to the configured mobile domain.

Alternatives to Cloudflare

In order for Cloudflare's mobile redirection service to work, the domain must be hosted on the Cloudflare platform (both root and www). As an alternative, mobile redirection can be implemented with JavaScript or via plugins and/or modules for your site's framework.

Plugins/Modules

JavaScript

You can detect user agents via JavaScript, then redirect requests to your configured and optimized mobile site. For cache considerations, we do not recommend using cookies that are passed to the backend for mobile theme detection and configuration. For details, see Caching: Advanced Topics.

The following example can also be used in addition to Cloudflare's mobile redirection service to detect user agents not yet supported, such as tablets.

if ((navigator.userAgent.match(/(iphone)|(ipod)|(ipad)|(android)|(blackberry)|(windows phone)|(symbian)/i))){
   location.replace("https://m.example.com");
}

More Resources