Question

我正在开发一个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％来显示块但由于某种原因，块/文本框的宽度（？）太大而无法容纳，我想要的是当你打开网站时没有可能放大并且按钮应该完全适合，有人知道如何实现这个目标吗？

Answer 1

必须将视口元标记添加到HEAD中，以便可以在移动设备上查看jQuery Mobile应用程序：

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

jQuery Mobile自动调整基于移动屏幕的网格

1 个答案: