meta name="viewport" content="width=device-width" 不适用于 Kendo UI Mobile

Question

I am using Kendo UI Mobile framework and I have a min-width: 768px CSS class assigned to one of my views because I have table data that can't be compressed anymore. The view shows correctly on a iPad, but when I look at it in a 7" Android Tablet, the view has horizontal scrolling. I need the view to auto zoom out so that the entire view is visible.

I can't figure out why this won't work.

Here is my header Meta Tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

Here is my kendo UI view:

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

And my view css is simple:

#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;
}

Answer 1

@Rob i face the same problem earlier, and below is my code which will disable zoom.(It will zoomout the screen and make screen stable..) to disable zooming sometimes user-scalable=no; or user-scalable=0; does't work in some devices, to make it work in all devices try below code..

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width; initial-scale=0.9; maximum-scale=0.9; minimum-scale=0.9;" />

making initial-scanle=0.9 and maximamu-scale=0.9 will make screen stable in small screen decies also.

Answer 2

in the meta tag add id="main"

hth