meta name="viewport" content="width=device-width" nicht mit Kendo UI Mobile

Bin ich mit Kendo UI Mobile-framework und ich habe eine min-width: 768px css-Klasse zugewiesen, einer meiner views weil ich die Tabelle Daten, die nicht komprimiert mehr. Die Ansicht zeigt korrekt auf einem iPad, aber wenn ich mir in einem 7" - Android-Tablet, die Ansicht hat das Horizontale scrollen. Ich brauche die Ansicht, auto-zoom aus, so dass die gesamte Ansicht sichtbar ist.

Ich kann nicht herausfinden, warum dies nicht funktionieren

Hier ist meine header-Meta-Tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

Hier ist mein kendo-UI-Ansicht:

<div data-role="view" id="main">
    <div class="headerWrapper">
        <div class="mainHeaderStyleLeft">
            <img src="Images/logo.png">
        </div>
        <div class="mainHeaderStyleRight">
            <div class="mainMenuButton"><img src="Images/MenuBttnUnselected.png"></div>
            <div class="checklistMenuButton"><img src="Images/MenuBttnUnselected.png"></div>
            <div class="reportingMenuButton"><img src="Images/MenuBttnUnselected.png"></div>
            <div class="trainingMenuButton"><img src="Images/MenuBttnUnselected.png"></div>
        </div>
    </div>


</div>

Und meiner Ansicht css ist einfach:

#main {
    min-width: 768px;
}
.mainMenuButton {

    margin-left: 230px;
    float: left;
}
.mainMenuButton img{
    width: 100px;
    height: 100px;
    margin-top: 15px;
}
.checklistMenuButton {
    margin-left: 10px;
    float: left;
}
.checklistMenuButton img{
    width: 100px;
    height: 100px;
    margin-top: 15px;
}
.reportingMenuButton {
    margin-left: 10px;
    float: left;
}
.reportingMenuButton img{
    width: 100px;
    height: 100px;
    margin-top: 15px;
}
.trainingMenuButton {
    margin-left: 10px;
    float: left;
}
.trainingMenuButton img{
    width: 100px;
    height: 100px;
    margin-top: 15px;
}