Table of Contents

Device Detection

How DynamicWeb delivers the appropriate version of the website across different devices

DynamicWeb uses device detection based on the user agent string provided by the client's browser. This mechanism helps in delivering the appropriate version of the website (mobile, tablet, or desktop) to enhance user experience across different devices.

The system analyzes the user agent string of the incoming request to determine the type of device:

  • Mobile Devices: If the user agent contains identifiers for Android phones or iPhones, DynamicWeb serves the mobile version of the site.
  • Tablet Devices: If the user agent indicates an Android tablet or an iPad, the tablet version of the site is served.
  • Desktop Devices: If neither mobile nor tablet identifiers are found, the system defaults to serving the desktop version of the site.

Expected behavior

DynamicWeb is designed to respect the user agent string provided by the browser. If a device reports itself as a desktop, the platform will serve the desktop version of the site. This is the expected behavior and ensures that users receive the version of the site that best matches their device capabilities and preferences.

Special case: iPad identification

iPads can present a challenge in device detection due to the following reasons:

  • Request Desktop Site Setting: Users can enable a setting in Safari (or other browsers) to request the desktop version of websites by default.
  • User Agent Reporting: Some iPads report a desktop user agent string, making it indistinguishable from a desktop device based solely on the user agent.

Because of these factors, iPads may sometimes receive the desktop version of the site. Why serving desktop sites to iPads is acceptable:

  • User Preference: If an iPad is set to request the desktop site, it implies the user prefers the desktop experience.
  • Functionality: Modern iPads have screens and performance capabilities comparable to desktops, making them well-suited for desktop site versions.
  • Consistency: Serving the desktop version ensures a consistent experience when the device identifies itself as such.

Workaround for iPad detection

Due to the way iPads report their user agent strings —often identifying themselves as desktop devices— they may not be served the tablet-optimized version of your site. If you want to ensure that iPad users receive the appropriate site version, you can implement a client-side workaround using JavaScript to detect iPads and redirect them accordingly.

By adding a JavaScript detection snippet to your site, you can more accurately detect iPads and redirect users to the tablet version by appending &devicetype=Tablet to the current URL:

<script type="text/javascript">
    (function() {
        var isIpad = navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;
        if (isIpad) {
            var currentUrl = window.location.href;
            if (currentUrl.indexOf('devicetype=Tablet') === -1) {
                var separator = currentUrl.indexOf('?') !== -1 ? '&' : '?';
                window.location.href = currentUrl + separator + 'devicetype=Tablet';
            }
        }
    })();
</script>

The JavaScript code helps by:

  • Detecting iPads: The script checks two conditions:
    • navigator.platform === 'MacIntel': Identifies devices running on the Mac OS platform, which includes iPads with iOS 13 and later.
    • navigator.maxTouchPoints > 1: Ensures the device supports touch input, distinguishing iPads from Mac desktops.
  • URL Redirection: If an iPad is detected and the URL does not already include the devicetype=Tablet parameter, the script:
    • Determines the appropriate query parameter separator (? or &).
    • Redirects the browser to the same URL with &devicetype=Tablet appended.

Steps to implement

  1. Insert the Script: Place the JavaScript code within the <head> or just before the closing </body> tag of your HTML pages.
  2. Test on an iPad:
    • Access your website using an iPad.
    • Verify that the URL now includes &devicetype=Tablet.
    • Ensure the tablet version of the site is displayed.
  3. Verify on Other Devices:
    • Test the site on desktop computers and other mobile devices.
    • Confirm that they are not redirected and receive the appropriate site version.
  4. Handle Potential Issues:
    • Caching: Be aware of caching mechanisms that might store redirects or parameterized URLs.
    • Redirect Loops: Ensure the script does not cause infinite redirect loops, especially if combined with server-side redirects.

Notes and considerations

  • User Experience: This workaround respects the capabilities of iPads, providing users with a version of the site optimized for their device.
  • Future-Proofing: As device specifications and user agent strings can change, consider periodically reviewing the detection logic.
  • Customization: You can modify the parameter name or value (devicetype=Tablet) to fit your site's URL structure or query parameter conventions.

Implementing this client-side detection script allows you to serve the tablet-optimized version of your site to iPad users, enhancing their browsing experience. This workaround complements DynamicWeb's default device detection by addressing the specific challenge posed by iPads that report themselves as desktop devices.

To top