meta name=»viewport» content=»width=device-width» no Está trabajando con Kendo UI Mobile

Estoy usando Kendo UI Mobile framework y tengo un min-width: 768px clase css asignado a uno de mis views porque tengo los datos de la tabla que no puede ser comprimido más. La vista muestra correctamente en un iPad, pero cuando miro en un 7″ Android Tablet, la vista ha de desplazamiento Horizontal. Tengo la necesidad de ver a auto zoom, de manera que toda opinión es visible.

No puedo averiguar por qué esto no funciona

Aquí está mi cabecera de la Etiqueta Meta:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

Aquí está mi kendo UI vista:

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

Y mi punto de vista css es 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;
}

OriginalEl autor Rob | 2013-04-13

2 Kommentare

  1. 0

    @Rob tengo el mismo problema anterior, y a continuación es mi código para desactivar el zoom.(Se zoomout la pantalla y la pantalla estable..)
    para desactivar el zoom a veces user-scalable=no; o user-scalable=0; no funcionar en algunos dispositivos, para que funcione en todos los dispositivos que se tratan a continuación el código..

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

    inicial-scanle=0,9 y maximamu escala=0.9 hará que la pantalla estable en la pequeña pantalla decies también.

    OriginalEl autor sumit

  2. -2

    en la etiqueta meta de agregar id=»principal»

    hth

    OriginalEl autor Averiz

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea