meta name = "viewport" content = "width = device-width" Не работает с Kendo UI Mobile

Question

Я использую платформу Kendo UI Mobile, и у меня есть класс css min-width: 768px, назначенный одному из моих 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

в мета-теге добавить идентификатор = «основной»

НТН

Answer 2

@Rob я сталкиваюсь с той же проблемой раньше, и ниже мой код, который будет отключить масштабирование. (Это ZoomOut экран и сделать экран стабильным.) , чтобы отключить масштабирование, иногда пользовательский-масштабируемый = нет; или user-scalable = 0; does't работу в некоторых устройствах, чтобы заставить его работать на всех устройствах, попробуйте ниже код ..

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

решений начально-scanle = 0,9 и maximamu масштаб = 0.9 сделает экран стабильным в небольших Decies экрана также.