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调整基于移动屏幕上的网格全自动

回答

相关问题