PhoneGapを使用して、 Twitter BootstrapとFlat UIを使用して作成されたアプリケーションに Web ページを構築しています。すべてが正常に機能しているように見えますが、1 つの問題が発生しています。デスクトップまたはラップトップで Web ページをテストすると、レイアウトは問題なく、12 のセクションに分かれていますが、スマートフォンのレイアウトで同じ行に画像またはボタンを配置しようとすると、それらが垂直に配置されます。
たとえば、1 つの行に 2 つのボタンがある場合、両方のボタンが電話の幅に合わせて引き伸ばされ、2 つの別々の行に配置されます。
<div class="row">
<div class="col-md-6">
<a href=".\back.html" class="btn btn-block btn-lg btn-success">BACK</a>
</div>
<div class="col-md-6">
<a href=".\next.html" class="btn btn-block btn-lg btn-inverse">NEXT</a>
</div>
</div>
また、上部で次のように宣言しました。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
なぜこれが起こっているのかについての考えはありますか?
私がやりたかったことの 1 つは、ユーザーが選択できる 1 ~ 6 の番号が付けられた 6 つのボックスを用意することでした。行ごとに2つの数字と3つの行が必要でした。このように画像(番号付きボックス)を実装しようとすると、再び引き伸ばされて、6行と巨大なボックスになってしまいました。