Question

我正在使用Kendo UI Mobile框架，我有一个min-width: 768px css类分配给我的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;
}

Answer 1

@Rob我之前遇到同样的问题，下面是我的代码，它将禁用缩放。（它会缩小屏幕并使屏幕稳定..）禁用缩放有时用户可伸缩=否;或user-scalable = 0;在某些设备上不起作用，使其在所有设备上都能正常运行，请尝试以下代码。

    <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;" />

使initial-scanle = 0.9和maximamu-scale = 0.9将使屏幕在小屏幕中稳定下来。

Answer 2

在元标记中添加id =“main”

HTH

meta name =“viewport”content =“width = device-width”不能使用Kendo UI Mobile

2 个答案: