jQueryMobile размер сетки на основе мобильного экрана автоматически

я работал на веб-сайте jQueryMobile и это то, что я сделал:jQueryMobile размер сетки на основе мобильного экрана автоматически

<body> 
<p class="tekst">De "Snelle" methode, berekent alleen op het lichaamsgewicht, en is alleen nuttig voor mensen met een normaal vetpercentage maar zelfs is deze methode onnauwkeurig.</p> 
<div class="ui-grid-c"> 
    <div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:65px">Gewicht (kg)<input type="text" name="m1kg" id="m1kg" value=""></div></div> 
    <div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:65px">Afvallen:<input type="text" name="m1cut" id="m1Cut" value=""></div></div> 
    <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:65px">Onderhoud:<input type="text" name="m1Onderhoud" id="m1Onderhoud" value=""></div></div> 
    <div class="ui-block-d"><div class="ui-bar ui-bar-e" style="height:65px">Aankomen:<input type="text" name="m1Bulk" id="m1Bulk" value=""></div></div> 
</div><!-- /grid-c --> 
<button id="btnmethod1">Bereken</button> 


<p class="tekst">De Formule van Harris-Benedict, berekent op lichaamsgewicht,lenge,leeftijd en activiteitsniveau. Een vrij betrouwbare methode om te gebruiken.</p> 
</body>

Теперь, когда я открываю этот сайт на мобильном телефоне (Iphone 4), экран не собственно изменен, и вы должны увеличить, чтобы читать то, что есть, например:.

unreadable

Как вы можете видеть, вы можете только видеть, что происходит, пока не приближать сетка использует 25%/25%/25%/25% для отображения блоков, но по какой-либо причине ширина o f блоки/текстовые поля (?) слишком велики, чтобы вписаться, что я хочу, когда вы открываете веб-сайт, нет возможности увеличить масштаб, и кнопки должны идеально вписаться, кто-нибудь знает, как это сделать?

источник

2013-05-29 Niek Jonkman

Viewport мета-тег должен быть добавлен в голову так JQuery Мобильные приложения можно просматривать на мобильных устройствах:

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1 minimum-scale=1; user-scalable=no"/>

Также вам нужно будет перепроектировать страницу смотрите, если вы правильно отображать это на мобильном устройстве (в моем случае Samsung Galaxy S3) ваши окна ввода станут очень короткими.

Вы можете проверить его здесь: http://www.fajrunt.org/viewport.html, просто откройте его на своем iPhone. Если он слишком велик, вы можете изменить масштаб, если вы опуститесь ниже 1, он будет выглядеть меньше. Например, вы можете попробовать 0,75.

Ваш окончательный код должен выглядеть следующим образом:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>jQM Complex Demo</title> 
     <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> 
     <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1 minimum-scale=1; user-scalable=no"/> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>  
    </head> 
    <body> 
     <div data-role="page" id="index"> 
      <div data-theme="b" data-role="header"> 
       <h1>Index page</h1> 
      </div> 

      <div data-role="content"> 
       <p class="tekst">De "Snelle" methode, berekent alleen op het lichaamsgewicht, en is alleen nuttig voor mensen met een normaal vetpercentage maar zelfs is deze methode onnauwkeurig.</p> 
       <div class="ui-grid-c"> 
        <div class="ui-block-a"> 
         <div class="ui-bar ui-bar-e" style="height:65px">Gewicht (kg)<input type="text" name="m1kg" id="m1kg" value=""/> 
         </div> 
        </div> 
        <div class="ui-block-b"> 
         <div class="ui-bar ui-bar-e" style="height:65px">Afvallen:<input type="text" name="m1cut" id="m1Cut" value=""/> 
         </div> 
        </div> 
        <div class="ui-block-c"><div class="ui-bar ui-bar-e" style="height:65px">Onderhoud:<input type="text" name="m1Onderhoud" id="m1Onderhoud" value=""/> 
         </div> 
        </div> 
        <div class="ui-block-d"> 
         <div class="ui-bar ui-bar-e" style="height:65px">Aankomen:<input type="text" name="m1Bulk" id="m1Bulk" value=""/></div> 
        </div> 
       </div><!-- /grid-c --> 
       <button id="btnmethod1">Bereken</button> 


       <p class="tekst">De Formule van Harris-Benedict, berekent op lichaamsgewicht,lenge,leeftijd en activiteitsniveau. Een vrij betrouwbare methode om te gebruiken.</p> 
      </div> 
     </div>  
    </body> 
</html>

источник

2013-05-29 11:09:49 Gajotres

Спасибо, это сработало :) –

Я рад помочь m8 :) – Gajotres

jQueryMobile размер сетки на основе мобильного экрана автоматически

ответ

Смежные вопросы