我正在使用 Kendo UI Mobile 框架并且我有一个 min-width: 768px
分配给我的一个 CSS 类 views
因为我有无法再压缩的表数据。该 View 在 iPad 上显示正确,但当我在 7"Android 平板电脑上查看它时,该 View 有水平滚动。我需要 View 自动缩小以便整个 View 可见。
我不明白为什么这行不通。
这是我的标题元标记:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
这是我的剑道 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>
我的 View 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;
}
最佳答案
@Rob 我之前遇到了同样的问题,下面是我的代码,它将禁用缩放。(它将缩小屏幕并使屏幕稳定..) 有时禁用缩放 user-scalable=no;或用户可扩展=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 也会使屏幕在小屏幕分辨率下保持稳定。
关于html - 元名称 ="viewport"内容 ="width=device-width"不适用于 Kendo UI Mobile,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15984571/