1

.0モバイルデバイスでラベルを入力フィールドに合わせるのに問題があります(通常のブラウザでは問題ありません)。

私が持っているもの:

<div data-role="fieldcontain">
    <label for="name">Label:</label> 
    <input data-mini="true" type="text" name="name" id="name" value="" />
</div>

私の頭の中には、次のようなメディアクエリがあります

<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0">

例、私が持っているもの:

ラベル


450px以下で欲しいもの:

ラベル____ ____ _ _

幅が450pxを超える場合、ラベル(cssのメディアクエリによる)は入力フィールドの左側に移動します。これは私のローカルブラウザの魅力のように機能します。しかし、解像度に関係なく任意のモバイルデバイスでこれにアクセスすると(s3、iphone、その他のデバイスを試してください)、ラベルは常にテキストフィールドの上に表示されます(非ランドスケープモードの場合)。

この動作がモバイルデバイスで発生する理由を理解したいと思います。これにはsthがありますか。ビューポートと関係がありますか?モバイルデバイスとその特定のメディアクエリでの開発に慣れていません。

グリッドやテーブルなどの回避策があることを十分に認識しています。しかし、私は自分のWebアプリでこの動作をしたいと思っています。小さいデバイスでは、2行で表示されるのが理にかなっています。jquery mobileクラスをオーバーライドせずに、方法があれば独自のソリューションを作成したいと思います。

前もって感謝します!

4

1 に答える 1

1

cssファイル:

jquery.mobile-1.2.0.min.css

編集:

3227.line:@media all and (min-width:300px) {

于 2013-01-29T08:24:13.703 に答える