Augmenting Device Detection

The recognition of new mobile devices or customized device user-agent identifiers can be accomplished by customizing the device detection code in the controller.

Note:

The getDeviceInfo function is called by the controller to determine if a mobile device is being used. This sample overrides the default getDeviceInfo call.
The isMobile property determines which layout will be used when rendering the page.
The isIOS property determines which provider is used with the Map component.

The built-in default isMobile test is

/Mobi|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent) && !/iPad/i.test(userAgent)

The built-in default isIOS test is

/iPad|iPhone|iPod/i.test(userAgent) && !window.MSStream

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1">
<meta name="search-site-verification" content="your verification string">
<script type="text/javascript">
var SCS = { sitePrefix: '/SampleSite/' };
 
 
SCS.getDeviceInfo = function() {
    // Return an object with two Boolean properties, isMobile and isIOS.
    var userAgent = navigator.userAgent;
    return {
        isMobile: /Mobi|iPhone/i.test(userAgent) && !/iPad/i.test(userAgent),
        isIOS: /iPad|iPhone|iPod/i.test(userAgent)
    };
};
</script>
<script src="/SampleSite/_sitesclouddelivery/renderer/controller.js"></script>
</head>
<body id="scsControllerBody"><noscript>Please enable JavaScript to view this site properly.</noscript>
<img id="scsWaitImage" style="display: none; margin-top: 5%; margin-left: auto; margin-right: auto;" src="data:image/png;base64,..." />
</body></html>