問題タブ [device-width]

Web サイトのデスクトップ バージョンのメディア クエリを使用しています。
私が探していた動作は次のとおり
です
。

そこで、画面解像度の範囲を定義し、.css ファイルで次のようにデバイスの最小幅と最大幅を試しました。

これは chrome と Firefox でうまく動作していますが、調査の結果、デバイス幅は 9 に準拠していないようです。

(このメタ タグを html ファイルに追加しました。

効果なし）

これをバイパスする方法はありますか？

ブートストラップ 3 でレスポンシブ Web サイトを作成していますが、ブラウザーのサイズを変更すると機能します。しかし、モバイル (Nokia lumia 920 Internet Explorer) から Web サイトを開くと、まったく反応しません。ブートストラップ列が機能していない、ブレークポイントが機能していません。私はそれをグーグルで調べましたが、ブレークポイントを変更しても役に立ちませんでした。これが私のhtmlです

ここに私のcssがあります、私はSASSを使用しています

私を助けてください！ありがとうございました！

特に iPhone 6 plus でボックス シャドウ プロパティの表示に問題があります。meta タグを追加するwidth=device-widthと、次のボックスの影はまったく表示されません。

-webkit-box-shadow: 1px 1px 5px 5px #a8a8a8; box-shadow: 1px 1px 5px 5px #a8a8a8;

メタ タグを使用しない場合、ページを拡大すると、ボックスの影が「魔法のように」消えます。ここでこれを理解できます：

http://jsfiddle.net/b6aaq57z/3/

これは特定の iPhone 6 plus のバグのようです。同じ iOS バージョン (8.0.2) を実行している古いバージョンの iPhone では、ボックス シャドウが正しく機能しています。

解決策を持っている人はいますか？

これは私のメタタグです...

ブレークポイントを最大 320、次に最大 480 として使用しています。デバイス幅 320 からページをテストしているときは問題なく動作していますが、デバイス幅 480 でページをテストしているときは、まだ幅 320 のスタイルシートが選択されています。間違ったスタイルシートを選択している理由を教えてください..

それは私のコードの問題ですか、それともエミュレーターの動作がおかしいだけですか? 助けてください！！

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

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

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

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

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

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

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

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

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

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

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

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

これはdivコードです:

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

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

device-width今日まで、タブレットやその他のモバイルデバイスでしか機能しないと思っていました。（あるいは、私が長い間間違っていたのかもしれません...）

モニターの解像度を幅 1024x768 に設定すると、以下のメディア クエリが機能します。

device-widthデスクトップ ブラウザーで動作するため、メディア クエリでタブレットとモバイルをターゲットにするにはどうすればよいですか?

幅が1024pxに固定され、デスクトップの中央に配置された Web サイトがあります。モバイル デバイスでは、幅は携帯電話またはタブレットのサイズと一致する必要があります。

デバイス幅を使用する場合、このように

次の結果が得られます。

を使用しても同じ結果が得られwidth=1024ます。

... ユーザーが概要を収集できないため、これは非常に紛らわしいです。device-widthWeb サイトのビューポートをこの特定のサイズに設定する理由がわかりません。そうでなければ期待します。

私が期待していて、本当に欲しいのはこれです：

質問: Web サイトが画面に正確に収まるようにデバイスに指示するにはどうすればよいですか?

iPhone 6 の解像度は1334x750pxですが、CSS の幅は375pxです。

私が知りたいのは、画像の幅を 750 ピクセルにして、CSS または HTML で幅を 375 ピクセルに設定した場合、ネイティブの 375 ピクセルの画像よりもシャープに見えるでしょうか?