2

テキスト入力のあるフォームを含む小さな Web サイトを作成しています。私はこのメタタグを使用しています：

<meta name="viewport" content="width=device-width" />

一部の要素をモバイル デバイスで正しく表示するため。Android Chromeを使用して確認しています。

問題が発生します。フォームの境界線（単純なdiv）とテキスト入力の境界線が非常に太くなりますが、1pxに設定されています。したがって、これはメタ タグのないフォームです。

メタなし

そして、これはメタタグ付きのフォームです:

メタ付き

したがって、最初の質問は次のとおりです。

device-width メタタグで 1px の増加を防ぐにはどうすればよいですか?

また、ご覧のとおり、上部と下部のパディングはテキスト入力とボタン (div ですが、submit-input ではありません!) でさえ異なります。2枚目の画像の方が分かりやすいです。私は、それが Android の入力の下線 (少なくともテキスト入力の場合) によって引き起こされていることを理解しました。単語の入力を開始すると、自動修正などのために下線が引かれます。

最初の状況では下線幅も 1 ピクセルなので、違いはそれほど悪くありません (ただし、これも修正したいと考えています)。2番目も厚いので、大きな違いがあります。

太い下線

したがって、論理的な質問は次のとおりです。

device-width メタタグで下線幅の増加を防ぐ方法は?

そしてもちろん、私は理解していません。

この増加するメカニズムが単純な div に影響するのはなぜですか??? 内部にタイピングはありません

これはdivコードです:

<div id="form-submit">ЗАБРОНИРОВАТЬ</div>

    div#form-submit {
    display: table;
    margin-bottom: 1em;
    border: 1px solid black;
    background-color: white;
    outline: 0px;
    font-size: 0.24em;
    font-family: inherit;
    padding-left: 0.3em;
    padding-right: 0.3em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-radius: 0.7em;
    margin: 0 auto;
    margin-bottom: 1.6em;
    cursor: pointer;
}

最後に、2 番目と 3 番目の画像の違いがわかります。入力を開始すると、ボタンのテキストが中央に少し移動しました...

誰かが問題について説明してくれれば、それは素晴らしいことです...

4

1 に答える 1

1

あなたの問題は、サイトがモバイル デバイス用に調整されていないのに、モバイルで表示しようとしているということです。

モバイル デバイスには ..機能と呼びましょう。入力ボックスなどの編集可能なフィールドを選択すると、そのセクションが拡大されます (入力しているテキストを読むことができます)。これは自動的に、ページがどのようにコーディングされているかによって、テキストを読むことができなくなります。

<meta />タグを編集して、モバイルのズームインを停止できます。

<meta name = "viewport" content = "width = device-width, user-scalable = 0, initial-scale = 1.0, maximum-scale = 1.0" />

これはブラウザに次のように伝えます。

  1. 初期幅をビューポート幅 (画面の幅) に設定します。
  2. ユーザーがページをズームできないようにする
  3. ページの初期ズームを 100% に設定する
  4. (ブラウザーまたはユーザーによって開始された) ページの可能な最大スケールを 100% に設定します。

最後のプロパティは、モバイルがテキスト フィールドを拡大できないようにするプロパティです。

ただし、人々にモバイルで表示させたいがズームインを許可しない場合は、Web サイトをモバイル対応にする必要があります。デスクトップ用に設計されたサイトでズームインを許可しないのは、悪い習慣です。

デスクトップ デザインをモバイル フレンドリーに改造するためのアイデアとテクニックについては、Googleレスポンシブ デザインをご覧ください。

于 2014-11-28T03:24:36.547 に答える