私が使用している: jquery-1.8.2 および jquery-mobile-1.2.0 (すべてのオプションをチェックして生成)
対象端末はiPhone 4/4s/5とiPadです。
現在の data-role="listview":
現在のコード:
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Test</h1>
</div>
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="index.html">
<img src="pics/paul_jones.jpg" />
<h3>First Element</h3>
<p>First</p>
</a></a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Test</a>
</li>
<li><a href="index.html">
<img src="pics/ray_moore.jpg" />
<h3>Second Element</h3>
<p>Second</p>
</a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Test</a>
</li>
<li><a href="index.html">
<img src="pics/lisa_wong.jpg" />
<h3>Third Element</h3>
<p>Third</p>
</a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Test</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
</pre>
この場合、各行が画面の 33% になるように、各項目の高さを自動調整して垂直方向に全画面に拡大する最善の方法は何ですか (フレームワークは水平方向の拡大を非常にうまく処理していることがわかります)。それに応じて画像のサイズが変更されますか？明らかに、これは 4 つ以上のアイテムがある場合に機能する必要があります。
私のサイトのメイン ページでは、代わりに、この方法でスタイルを設定した 3 つまたは 4 つの「画像ボタン」を使用したいと考えています。
<b>#button_id .ui-btn-inner</b>
background: url("../img/button_image.png") no-repeat rgba(0, 0, 0, 0.4);
background-size: 100% 100%;
画面を垂直方向に塗りつぶし、それ自体を自動サイズ変更します。