gpt4 book ai didi

jquery-mobile - jQuery Mobile 根据移动屏幕自动调整网格大小

转载 作者:行者123 更新时间:2023-12-02 02:01:57 26 4
gpt4 key购买 nike

我在一个 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% 来显示 block ,但出于某种原因, block /文本框的宽度 ( ?)太大而不适合,我想要的是当您打开网站时无法放大并且按钮应该完全适合,有人知道如何实现吗?

最佳答案

必须将视口(viewport)元标记添加到 HEAD 中,以便可以在移动设备上查看 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>

关于jquery-mobile - jQuery Mobile 根据移动屏幕自动调整网格大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16811697/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com