Kendo device specific css

Question

Working in Kendo UI Mobile, is it possible to define device specific css elements.

For example to perform platform specific css for iOS and Android I use

.km-ios .km-view-title
{
    height: 40px;
    color: #fff;
}
.km-android .km-view-title
{
    height: 50px;
    color: #000;
}

however how to specify between iPhone 4 and iPhone5, is it possible?

Answer 1

Kendo UI Mobile does not provide device specific classes. You can add such class manually, based on the difference of the screen height.

Answer 2

Actually Kendo UI Mobile does add platform version CSS classes by concatenating the platform class and its major version. So, you can target iOS5 with .km-ios5 and Android 2.x with .km-android2.

There's one additional catch - iOS7 doesn't have the .km-ios class that previous iOSes have - this is due to the major redesign the platform received, so Kendo UI Mobile considers it separate.