Support

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>