Visitors can view your application from different device types, such as mobile phones, tablets, and desktops with different screen sizes. One method to deliver the best experience for website visitors with different screen sizes is to develop separate versions of your applications that are optimized for smaller screens. For example, you might have one application optimized for phone screens, one for tablet screens, and one for laptop or larger screens. This article describes how you can use device redirect headers to redirect website visitors to an application version that is best suited for display on their devices.
Depending on your needs, another good option may be to use a responsive design for your application, which will detect the type of device that is accessing the application and adjust the way pages are displayed accordingly.
Device detection and redirects
Acquia’s Varnish® service inspects incoming HTTP user-agent headers and attempts to detect the type of client that is performing the request. After the Varnish service detects the device, it will add an X-Ua-Device HTTP request header to the information that is sent to your application. Headers of this type can have any of the following values:
pcbottablet-ipadtablet-rimtablet-hptablet-kindletablet-androidtablet-microsoftmobile-genericmobile-smartphonemobile-botmobile-iphonemobile-androidmobile-firefoxos
Cloud Platform will determine if you can use the detected device, you can issue other common HTTP response headers (such as Cache-Control or Location) as needed to differentiate and manipulate the flow of traffic.
The Varnish service also allows you to redirect traffic based on the device in use. Applications can respond with URLs to redirect to in any of the following headers:
X-AH-Desktop-Redirect(for desktops and laptop devices)X-AH-Mobile-Redirect(for mobile devices)X-AH-Tablet-Redirect(for tablets)
Varnish does not inspect URLs, which means that your application can redirect traffic for certain devices to entirely different domain names.
Redirects based on the request user-agent header
In the Cloud Platform platform, you can redirect visitors in the Varnish layer, based on the devices they are using, as determined by the user-agent HTTP header in the request. Cloud Platform supports the following HTTP headers for device-based redirects:
- Desktop devices:
X-AH-Desktop-Redirect - Mobile devices:
X-AH-Mobile-Redirect - Tablet devices:
X-AH-Tablet-Redirect
Setting up device redirects in the settings.php file
You can set device-based redirects by using your Drupal application’s settings.php file to set HTTP headers in the response.
Redirects with HTTPS
Drupal will correctly identify incoming HTTPS requests using the normal HTTPS infrastructure environment variable if your application uses the Cloud Platform include file statement in your application’s settings.php file.
Opting out of device-based redirects
You can provide a method for users on mobile or tablet devices to view the desktop version of the application if they prefer. You can do this with a custom block that appears on every page, letting visitors select the desktop version.
Setting headers in Drupal
You can also set the headers in Drupal itself to perform device-based redirects. This method works only for pages actually served by Drupal. Static assets, such as files, are not affected by the headers. The benefit of using Drupal’s headers is that you can create more complex device-based redirects based solely on the landing page.
Many modules are available on Drupal.org that can help you create device-based redirects for your application. Acquia does not test these and cannot make specific recommendations for their use on Acquia Cloud.
Use device-based redirects instead of using the Drupal Mobile Tools module, since that module sets a session cookie, which bypasses the Varnish cache and therefore can negatively affect your application’s performance on Cloud Platform. For more information, see Session cookies invalidate Varnish caching.