我正在使用 Kendo UI Mobile 框架，并且我有一个min-width: 768pxCSS 类分配给我的一个，views因为我有无法再压缩的表数据。该视图在 iPad 上正确显示，但是当我在 7" Android 平板电脑中查看它时，该视图具有水平滚动。我需要该视图自动缩小以便整个视图可见。
我不明白为什么这行不通。
这是我的标头元标记：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
这是我的剑道 UI 视图：
<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>
我的观点 css 很简单：
#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;
}