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

Posted 2023-03-06

【中文标题】meta name="viewport" content="width=device-width" 不适用于 Kendo UI Mobile

【英文标题】：meta name="viewport" content="width=device-width" Is not working with Kendo UI Mobile

【发布时间】：2013-04-05 18:15:20

【问题描述】：

我正在使用 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;

【参考方案1】：

@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 也可以使屏幕在小屏幕时保持稳定。

【参考方案2】：

在元标记中添加 id="main"

第