問題タブ [device-width]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - モバイル メディア クエリ、解像度、ppi シミュレーター?
レスポンシブ デザインを適切にテストするために、さまざまなモバイル デバイスやタブレット デバイスをシミュレートできるデスクトップ ツールやブラウザ プラグインはありますか? ブラウザのウィンドウ サイズを変更するだけではありません。他のアイテムもシミュレートする必要があります。
- デバイス幅
- 最小デバイス幅
- 最大デバイス幅
- 向き (横/縦)
- -webkit-min-device-pixel-ratio
- 解像度
- ppi
ipad - iPad の Safari ビューポートの幅が 1028 ピクセルではなく 768 ピクセルしかないのはなぜですか?
どこを読んでも、iPad 1 の画面の幅は 1024 x 768 です。
ブートストラップを使用してサイトを構築しました。iPad でサイトを横向きモードで表示すると、折りたたみ可能なナビゲーション ボタンが表示されます。そうすべきではありません。幅が 1024px 未満のビューポートにのみ表示されます。
次に、jQuery が $(window).width(); を使用して認識する幅を調べました。768px x 467px しか報告されていません。
次のメタタグがあります。
meta name="viewport" content="width=デバイスの幅"
android - サムスンギャラクシーノートIIのデバイス幅はどれくらいですか？
Webブラウザ用のSamsungGalaxyNote IIの実際のデバイス幅が見つかりません。320px、480px、640pxの3つの異なる値が見つかりましたが、どちらが正しいかわかりません。
ちなみに、ウィキペディアでピクセル密度別のディスプレイのリストを見つけましたが、デバイス幅はありません...
編集：モバイルブラウザ（ビューポート）で宣言されたWebデバイス幅を探しています。
css - CSS: 同一のメディア クエリが常に複数必要なようです
そのため、私は常にスマートフォンに対して2つの同一のメディアクエリを実行しているようです。1つは最小または最大幅で、もう1つは最小または最大デバイス幅です（iPhoneなどをターゲットにするため）...
今では、これが最も効率的な方法ではないように感じずにはいられません...特に、多くのものを移動したり、サイト/アプリケーションを電話固有のものに変更したりする場合. また、特にタブレットのサイズのためにさらに 2 つの操作を行う必要がある場合。
今、私は本当に両方が必要ですか？それは重要で、違いは正確には何ですか？
android - モバイル コンテンツ withdh(body) = メディアの幅ですが、ユーザーはスクロールできます
私はすべてのウェブを見落とし（推測します）、このタスクの解決策を見つけようとしました：モバイルで正しいコンテンツを表示するためのすべての要件があります（メタメディアとCSSメディアなどを意味します）が、Androidフォンではできます右にスクロールします。幅が 320px を超える div がないかどうかを確認しました。私が話しているウェブサイトはhttp://vasiliib.p.ht/leverage/です
これが私のページのコンテンツの原因であると考え、別のページhttp://vasiliib.p.ht/leverage/mobile.htmlを作成しました。ここでは、単純な html コードを挿入しました。そして、同じ問題があります..
私はイライラしています..私の目をきれいにしてください..そして私の間違いを見せてください..
お返事をお待ちしております。よろしく。
css - レスポンシブ CSS がメディア幅を取得しないのはなぜですか?
タイトルの通り、PHP Web ページにメディア画面幅固有の CSS を設定できません。
これが私の<head>セクションですindex.php：
私の HTML 要素<header> ... </header>の場合、私の CSS (のstyle.css) で、次のように指定しました:
しかし、"Web Developer" ツールバーのResize » View Responsive Layoutsを使用すると、さまざまな幅のデバイス レイアウトでいくつかの低下が見られます。
例:
私の<header>タグでは、内側の要素がはみ出しているため、ヘッダーの高さを増やす必要があります。だから私はで指定しましたstyle.css：
しかし、それは機能していません。:(
レスポンシブ CSS について何が欠けていますか?
編集
最初の2つの回答の後、彼らの提案とともに、次を使用してみました:
はい、メディア CSS を の一番下に置きましたstyle.css。
また、次のように分離してみmobile.cssました：
次のコードを配置しようとした場所：
それでもうまくいきません。
css - メディアクエリをテストするためにブラウザーでデバイスの幅と向きをシミュレートする方法は?
私は自分のウェブサイトをローカルで開発しており、Chrome を使用してプレビューを行っています。を使用するメディアクエリをテストするためにブラウザのサイズを変更するのは非常に簡単ですが、組み込みの設定でmax/min-widthシミュレートすることはできません。max/min-device-widthモバイル デバイスをシミュレートし、メディア クエリをトリガーする Chrome 拡張機能はありmax/min-device-widthますorientation:portrait/landscapeか?
基本的に、このメディア クエリを、スマートフォンではなくパソコンの Chrome でテストする方法が必要です。
@media only screen and (max-device-width: 600px) and (orientation: portrait)