support
A range of useful supported by the current browser capabilities and features.
Example
<div id="support-info"></div>
<script>
var supportInfo = kendo.support;
var html = "<h3>Browser Support Information:</h3>";
html += "<p>Touch support: " + supportInfo.touch + "</p>";
html += "<p>Pointer support: " + supportInfo.pointers + "</p>";
html += "<p>Hardware 3D support: " + supportInfo.hasHW3D + "</p>";
html += "<p>Native scrolling support: " + supportInfo.hasNativeScrolling + "</p>";
html += "<p>Device pixel ratio: " + supportInfo.devicePixelRatio + "</p>";
html += "<p>Placeholder support: " + supportInfo.placeholder + "</p>";
html += "<p>Scrollbar width: " + supportInfo.scrollbar() + "px</p>";
$("#support-info").html(html);
</script>support.touchBoolean
Return true if the browser supports touch events.
Example
<script>
if (kendo.support.touch) {
console.log("Touch events are supported");
// Enable touch-specific features
} else {
console.log("Touch events are not supported");
// Use mouse events instead
}
</script>support.pointersBoolean
Return true if the browser supports pointer events (IE10 and Metro apps currently).
Example
<script>
if (kendo.support.pointers) {
console.log("Pointer events are supported");
// Use pointer events for unified input handling
} else {
console.log("Pointer events are not supported");
// Fall back to touch and mouse events
}
</script>support.scrollbarFunction
Checks for the browser scrollbar width, returns scrollbar width in pixels, 0 if no scrollbars available (e.g. in mobile).
Example
<script>
var scrollbarWidth = kendo.support.scrollbar();
console.log("Scrollbar width: " + scrollbarWidth + "px");
// Adjust layout based on scrollbar width
if (scrollbarWidth > 0) {
$("#content").css("margin-right", scrollbarWidth + "px");
}
</script>support.hasHW3DBoolean
Return true if the browser supports 3D transitions and transforms.
Example
<script>
if (kendo.support.hasHW3D) {
console.log("3D transforms are supported");
// Use 3D transforms for smooth animations
$("#element").css("transform", "translateZ(0)");
} else {
console.log("3D transforms are not supported");
// Use 2D transforms instead
}
</script>support.hasNativeScrollingBoolean
Returns true if the browser supports overflow-scrolling CSS property (currently only iOS 5+).
Example
<script>
if (kendo.support.hasNativeScrolling) {
console.log("Native scrolling is supported");
// Apply momentum scrolling
$("#scrollable").css("-webkit-overflow-scrolling", "touch");
} else {
console.log("Native scrolling is not supported");
// Use custom scrolling implementation
}
</script>support.devicePixelRatioNumber(default: 1)
Returns the current device's Device to Pixel Ratio. Doesn't work in Windows Phone 8, where IE10 doesn't support it.
Example
<script>
var ratio = kendo.support.devicePixelRatio;
console.log("Device pixel ratio: " + ratio);
// Adjust image quality for high DPI displays
if (ratio > 1) {
$("img").each(function() {
var src = $(this).attr("src");
$(this).attr("src", src.replace(".jpg", "@2x.jpg"));
});
}
</script>support.placeholderBoolean
Returns true if the browser supports input placeholders.
Example
<script>
if (kendo.support.placeholder) {
console.log("Placeholder is supported");
// Use native placeholder
$("#input").attr("placeholder", "Enter your name");
} else {
console.log("Placeholder is not supported");
// Implement custom placeholder
$("#input").val("Enter your name").addClass("placeholder");
}
</script>support.zoomLevelNumber(default: 1)
Returns the current zoom level on a mobile browser (returns 1 on desktop).
Example
<script>
var zoomLevel = kendo.support.zoomLevel;
console.log("Current zoom level: " + zoomLevel);
// Adjust UI elements based on zoom level
if (zoomLevel > 1) {
$("#toolbar").addClass("zoomed-in");
console.log("User has zoomed in");
}
</script>support.mobileOSObject
Returns a number of properties that identify the current mobile browser. Parses navigator.userAgent to do it. False on desktop.
Example
<div id="mobile-info"></div>
<script>
var mobileOS = kendo.support.mobileOS;
var html = "<h3>Mobile OS Information:</h3>";
if (mobileOS) {
html += "<p>Device: " + mobileOS.device + "</p>";
html += "<p>Tablet: " + (mobileOS.tablet || "false") + "</p>";
html += "<p>Browser: " + mobileOS.browser + "</p>";
html += "<p>OS Name: " + mobileOS.name + "</p>";
html += "<p>Major Version: " + mobileOS.majorVersion + "</p>";
html += "<p>Minor Version: " + mobileOS.minorVersion + "</p>";
html += "<p>Flat Version: " + mobileOS.flatVersion + "</p>";
html += "<p>App Mode: " + mobileOS.appMode + "</p>";
html += "<p>Cordova: " + mobileOS.cordova + "</p>";
if (mobileOS.android) {
html += "<p>Running on Android device</p>";
} else if (mobileOS.ios) {
html += "<p>Running on iOS device</p>";
}
} else {
html += "<p>Not running on a mobile device</p>";
}
$("#mobile-info").html(html);
</script>support.mobileOS.deviceString
Returns the current mobile device identifier, can be "fire", "android", "iphone", "ipad", "meego", "webos", "blackberry", "playbook", "wp", "windows".
Example
<script>
var mobileOS = kendo.support.mobileOS;
if (mobileOS) {
console.log("Device: " + mobileOS.device);
if (mobileOS.device === "iphone" || mobileOS.device === "ipad") {
console.log("Running on iOS device");
// Apply iOS-specific styling
}
}
</script>support.mobileOS.tabletString(default: false)
Returns the current tablet identifier or false if the current device is not a tablet, can be "fire", "ipad", "playbook" or false.
Example
<script>
var mobileOS = kendo.support.mobileOS;
if (mobileOS && mobileOS.tablet) {
console.log("Running on tablet: " + mobileOS.tablet);
// Apply tablet-specific layout
$("body").addClass("tablet-layout");
} else {
console.log("Not running on a tablet");
}
</script>support.mobileOS.browserString(default: "default")
Returns the current browser identifier or "default" if the browser is the native one, can be "omini", "omobile", "firefox", "mobilesafari", "webkit", "ie", "default".
Example
<script>
var mobileOS = kendo.support.mobileOS;
if (mobileOS) {
console.log("Mobile browser: " + mobileOS.browser);
if (mobileOS.browser === "mobilesafari") {
console.log("Running in Mobile Safari");
// Apply Safari-specific workarounds
}
}
</script>support.mobileOS.nameString
Returns the current os name identifier, can be "ios", "android", "blackberry", "windows", "webos", "meego". For convenience a property with the os name is also initialized, for instance:
if (kendo.support.mobileOS.android) {
// Do something in Android
}Example
<script>
var mobileOS = kendo.support.mobileOS;
if (mobileOS) {
console.log("OS name: " + mobileOS.name);
// Use convenience properties
if (mobileOS.ios) {
console.log("Running on iOS");
} else if (mobileOS.android) {
console.log("Running on Android");
}
}
</script>support.mobileOS.majorVersionString
The current OS major version, e.g. "5" in iOS 5.1.
Example
<script>
var mobileOS = kendo.support.mobileOS;
if (mobileOS) {
console.log("Major version: " + mobileOS.majorVersion);
if (mobileOS.ios && parseInt(mobileOS.majorVersion) >= 7) {
console.log("iOS 7 or higher detected");
// Use features available in iOS 7+
}
}
</script>support.mobileOS.minorVersionString
The current OS minor versions, e.g. "1.1" in iOS 5.1.1.
Example
<script>
var mobileOS = kendo.support.mobileOS;
if (mobileOS) {
console.log("Minor version: " + mobileOS.minorVersion);
console.log("Full version: " + mobileOS.majorVersion + "." + mobileOS.minorVersion);
// Check for specific version requirements
if (mobileOS.android && mobileOS.majorVersion === "4" && parseFloat(mobileOS.minorVersion) >= 4) {
console.log("Android 4.4+ detected");
}
}
</script>support.mobileOS.flatVersionNumber
A convenience property to allow easier version checks, for instance:
var os = kendo.support.mobileOS;
if (os.ios && os.flatVersion >= 400 && os.flatVersion < 500) {
// Do something in iOS 4.x
}Example
<script>
var mobileOS = kendo.support.mobileOS;
if (mobileOS) {
console.log("Flat version: " + mobileOS.flatVersion);
// Easy version range checking
if (mobileOS.ios && mobileOS.flatVersion >= 800) {
console.log("iOS 8.0 or higher");
// Enable modern iOS features
} else if (mobileOS.android && mobileOS.flatVersion >= 440) {
console.log("Android 4.4 or higher");
// Enable modern Android features
}
}
</script>support.mobileOS.appModeBoolean
Returns true if running in application mode - pinned to desktop in iOS or running in PhoneGap/WebView.
Example
<script>
var mobileOS = kendo.support.mobileOS;
if (mobileOS && mobileOS.appMode) {
console.log("Running in app mode");
// Hide browser chrome, adjust layout for full screen
$("body").addClass("app-mode");
} else {
console.log("Running in browser");
}
</script>support.mobileOS.cordovaBoolean
Returns true if running in a Cordova/PhoneGap/Telerik AppBuilder application.
Example
<script>
var mobileOS = kendo.support.mobileOS;
if (mobileOS && mobileOS.cordova) {
console.log("Running in Cordova/PhoneGap app");
// Enable device APIs, adjust for hybrid app environment
document.addEventListener("deviceready", function() {
console.log("Cordova device ready");
});
} else {
console.log("Not running in Cordova");
}
</script>support.browserObject
Convenience replacement for the now deprecated jQuery.browser. It returns an object with the browser identifier initialized as a boolean property and a version. The identifiers are identical to jQuery ones, e.g. "webkit", "opera", "msie", "edge" and "mozilla". In addition WebKit browsers will return their name e.g. "safari" and "chrome".
Example
<div id="browser-info"></div>
<script>
var browser = kendo.support.browser;
var html = "<h3>Browser Information:</h3>";
html += "<p>Browser version: " + browser.version + "</p>";
if (browser.webkit) {
html += "<p>WebKit-based browser detected</p>";
if (browser.chrome) {
html += "<p>Google Chrome</p>";
} else if (browser.safari) {
html += "<p>Safari</p>";
}
} else if (browser.msie) {
html += "<p>Internet Explorer</p>";
} else if (browser.edge) {
html += "<p>Microsoft Edge</p>";
} else if (browser.mozilla) {
html += "<p>Mozilla Firefox</p>";
} else if (browser.opera) {
html += "<p>Opera</p>";
}
$("#browser-info").html(html);
console.log("Full browser object:", kendo.stringify(browser));
</script>
<script>
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log(kendo.stringify(kendo.support.browser));
// Chrome will return this object: { "webkit": true, "chrome": true, "version": 37 }
// IE11 will return this one: { "msie": true, "version": 11 }
</script>support.browser.versionNumber
The current browser major version, e.g. "7" in Internet Explorer 7.
Example
<script>
var browser = kendo.support.browser;
console.log("Browser version: " + browser.version);
// Check for specific browser versions
if (browser.msie && browser.version < 9) {
console.log("Old Internet Explorer detected");
// Show upgrade message or apply polyfills
} else if (browser.chrome && browser.version >= 50) {
console.log("Modern Chrome detected");
// Use latest features
}
</script>