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

視窗meta標籤必須加入到一個頭，jQuery Mobile的應用程序可以在移動設備上查看：

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

你也將需要重新設計你的頁面的外觀，如果你正確地顯示該移動設備（在我的情況下三星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調整基於移動屏幕上的網格全自動

回答

相關問題