Browser Detection API
To facilitate client-side development with the controls in the Telerik UI suite, Telerik provides a set of static client-side JavaScript objects under the global Telerik namespace that you can use for browser detection. Where possible, feature detection is used, and in other places the user agent string is parsed.
You can find the lits of flags below.
The Telerik global object is loaded into the window object whenever you add a UI control from the Telerik.Web.UI namespace to the page. Alternatively, if you do not use any Telerik control, but have referenced the assembly Telerik.Web.UI.dll you can manually reference the needed JavaScript resource file:
<asp:ScriptManager runat="server" ID="ScriptManager1">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
</Scripts>
</asp:ScriptManager>
The Telerik object provides the following set of static properties for browser detection:
Platform detection under the
Telerik.Web.Platformobject:
-
Telerik.Web.Platform.android- returnstrueif the browser is on an Android device. -
Telerik.Web.Platform.ios- returnstrueif the browser is on an iOS device. -
Telerik.Web.Platform.ipad- returnstrueif the browser is on an iPad. -
Telerik.Web.Platform.iphone- returnstrueif the browser is on an iPhone. -
Telerik.Web.Platform.linux- returnstrueif the browser is on a Linux device. -
Telerik.Web.Platform.mac- returnstrueif the browser is on a Mac. -
Telerik.Web.Platform.windows- returnstrueif the browser is on a Windows device. -
Telerik.Web.Platform.windowsphone- returnstrueif the browser is on a Windows Phone device.
Browser detection under the
Telerik.Web.Browserobject:
-
Telerik.Web.Browser.chrome- returnstrueif the browser is Chrome. -
Telerik.Web.Browser.documentMode- returns the document mode of the browser (IE only). -
Telerik.Web.Browser.edge- returnstrueif the browser is Edge. -
Telerik.Web.Browser.edgemobile- returnstrueif the browser is Edge Mobile. -
Telerik.Web.Browser.ff- returnstrueif the browser is Firefox. -
Telerik.Web.Browser.fullVersion- returns the full version number of the browser. -
Telerik.Web.Browser.ie- returnstrueif the browser is Internet Explorer. -
Telerik.Web.Browser.iemobile- returnstrueif the browser is IE Mobile. -
Telerik.Web.Browser.opera- returnstrueif the browser is Opera. -
Telerik.Web.Browser.operaMini- returnstrueif the browser is Opera Mini. -
Telerik.Web.Browser.operaPresto- returnstrueif the browser is Opera Presto (version < 12). -
Telerik.Web.Browser.quirksMode- returnstrueif IE is in Quirks Mode. -
Telerik.Web.Browser.safari- returnstrueif the browser is Safari. -
Telerik.Web.Browser.scrollBarWidth- returns the widths of the browser scrollbars in pixels. -
Telerik.Web.Browser.standardsMode- returnstrueif the browser is running in standards mode. -
Telerik.Web.Browser.version- returns the short version number of the browser. -
Telerik.Web.Browser.webkit- returnstrueif the browser is WebKit-based.
Feature detection under the
Telerik.Web.BrowserFeaturesobject:
-
Telerik.Web.BrowserFeatures.canvas- returnstrueif the browser supports the<canvas>object. -
Telerik.Web.BrowserFeatures.input- returns an array of boolean flags that indicate whether the browser supports the following input features:autocompleteautofocuslistmaxminmultiplepatternplaceholderrequiredstep
-
Telerik.Web.BrowserFeatures.inputTypes- returns an array of boolean flags that indicate whether the browser supports the following input types:colordatedatetimedatetime-localemailmonthnumberrangesearchteltimeurlweek
-
Telerik.Web.BrowserFeatures.msPointerEvents- returnstrueif the browser supports the MS pointer events. -
Telerik.Web.BrowserFeatures.pointerEvents- returnstrueif the browser supports the standard pointer events. -
Telerik.Web.BrowserFeatures.propertychange- returnstrueif the browser supports the propertychange notifier. -
Telerik.Web.BrowserFeatures.touchAndMouseEvents- returnstrueif the browser supports both touch and mouse events (i.e., it is a mixed device). -
Telerik.Web.BrowserFeatures.touchEvents- returnstrueif the browser supports touch events. This usually indicates a mobile device.
Examples
Here is one example that shows how you can use these flags. The script is after the script manager so that the Telerik namespace is available.
<telerik:RadScriptManager runat="server" ID="RadScriptManager1">
<Scripts>
<%--This script refernece is only needed if you do not use any Telerik.Web.UI controls on the page--%>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
</Scripts>
</telerik:RadScriptManager>
<script>
if (Telerik.Web.BrowserFeatures.touchEvents) {
alert("mobile device");
}
if (Telerik.Web.Browser.chrome) {
alert("this is Chrome");
}
if (Telerik.Web.BrowserFeatures.touchEvents &&
Telerik.Web.Browser.chrome &&
Telerik.Web.Platform.android) {
alert("this is mobile Chrome on Android")
}
</script>