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.Platform
object:
-
Telerik.Web.Platform.android
- returnstrue
if the browser is on an Android device. -
Telerik.Web.Platform.ios
- returnstrue
if the browser is on an iOS device. -
Telerik.Web.Platform.ipad
- returnstrue
if the browser is on an iPad. -
Telerik.Web.Platform.iphone
- returnstrue
if the browser is on an iPhone. -
Telerik.Web.Platform.linux
- returnstrue
if the browser is on a Linux device. -
Telerik.Web.Platform.mac
- returnstrue
if the browser is on a Mac. -
Telerik.Web.Platform.windows
- returnstrue
if the browser is on a Windows device. -
Telerik.Web.Platform.windowsphone
- returnstrue
if the browser is on a Windows Phone device.
Browser detection under the
Telerik.Web.Browser
object:
-
Telerik.Web.Browser.chrome
- returnstrue
if the browser is Chrome. -
Telerik.Web.Browser.documentMode
- returns the document mode of the browser (IE only). -
Telerik.Web.Browser.edge
- returnstrue
if the browser is Edge. -
Telerik.Web.Browser.edgemobile
- returnstrue
if the browser is Edge Mobile. -
Telerik.Web.Browser.ff
- returnstrue
if the browser is Firefox. -
Telerik.Web.Browser.fullVersion
- returns the full version number of the browser. -
Telerik.Web.Browser.ie
- returnstrue
if the browser is Internet Explorer. -
Telerik.Web.Browser.iemobile
- returnstrue
if the browser is IE Mobile. -
Telerik.Web.Browser.opera
- returnstrue
if the browser is Opera. -
Telerik.Web.Browser.operaMini
- returnstrue
if the browser is Opera Mini. -
Telerik.Web.Browser.operaPresto
- returnstrue
if the browser is Opera Presto (version < 12). -
Telerik.Web.Browser.quirksMode
- returnstrue
if IE is in Quirks Mode. -
Telerik.Web.Browser.safari
- returnstrue
if the browser is Safari. -
Telerik.Web.Browser.scrollBarWidth
- returns the widths of the browser scrollbars in pixels. -
Telerik.Web.Browser.standardsMode
- returnstrue
if the browser is running in standards mode. -
Telerik.Web.Browser.version
- returns the short version number of the browser. -
Telerik.Web.Browser.webkit
- returnstrue
if the browser is WebKit-based.
Feature detection under the
Telerik.Web.BrowserFeatures
object:
-
Telerik.Web.BrowserFeatures.canvas
- returnstrue
if 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:autocomplete
autofocus
list
max
min
multiple
pattern
placeholder
required
step
-
Telerik.Web.BrowserFeatures.inputTypes
- returns an array of boolean flags that indicate whether the browser supports the following input types:color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
-
Telerik.Web.BrowserFeatures.msPointerEvents
- returnstrue
if the browser supports the MS pointer events. -
Telerik.Web.BrowserFeatures.pointerEvents
- returnstrue
if the browser supports the standard pointer events. -
Telerik.Web.BrowserFeatures.propertychange
- returnstrue
if the browser supports the propertychange notifier. -
Telerik.Web.BrowserFeatures.touchAndMouseEvents
- returnstrue
if the browser supports both touch and mouse events (i.e., it is a mixed device). -
Telerik.Web.BrowserFeatures.touchEvents
- returnstrue
if 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>