問題タブ [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.
javascript - Phonegap Androidのscreen.heightとscreen.widthが黒いシステムバースペースを返す
Phonegap for Android でアプリを開発しています。
これらのアプリのいくつかでは、javascript を使用して動的な計算を行い、要素を画面に配置しています。
アプリは config.xml でフルスクリーン設定を使用します
これまでのところうまく機能していますが、今日、1 つのアプリ コンテンツが下部の黒い Android システム バー ([戻る] ボタンなど) の背後にあることに気付きました。横向きにすると、バーの後ろにも入ります。
たとえば、ランドスケープ モードでは、以前は 620 を返していた screen.width がデバイスに対して 640 を返していることがわかりました。システム バーのスペースが含まれているように見えますか?
値にシステム バーのスペースが含まれているかどうかを検出するにはどうすればよいですか? また、システム バーが占めるスペースをどのように知ることができますか?
アプリの動作は、再コンパイルせずに変更されました。そのため、外部の何かがその動作に影響を与えました。数日前、携帯電話に Android アップデートがありました。これに関係しているのかもしれません。
電話は Android 5.0.2 を使用しています。Android 5.0.2 にアップグレードしたところ、問題なく動作しました。その後、別の小規模な更新が行われましたが、Android のバージョン番号は変更されませんでした。デバイスは Moto G です。
これについて助けてくれてありがとう。今までと同じように、システム バーが使用するスペースを使わずに画面の幅と高さを取得できるようにする必要があります。
android - さまざまなブラウザー (Android) からのさまざまなメディア クエリ ブレークポイントは、一般的に期待すべきことですか?
Huawei Ascend Y330/Android 4.2 で 6 つの異なるブラウザーを使用してメディア クエリをテストし、mqtest.io によって報告された 3 つの異なるデバイス幅の結果を得ました。
次に、ブラウザごとに、次のような css を使用して自分の html ページで実際のブレークポイントをテストし、
@media only screen and (max-device-width: 320px)フォーマットの変更が表示されるまでピクセル値を変更しました。6 つのケースすべてのデバイス幅は、デバイスの mqtest.io によって報告されたものと一致します。
明らかに問題は、ブラウザーの不一致により、デザインを制御できないことです。これは »ローカル» 問題ですか、それとも を使用する場合の一般的な問題@mediaですか?
mqtest.io および Web ページ テストによる結果
Dolphin および Android のデフォルト ブラウザ
device-width: 480px
device-height: 800pxOpera と Google Chrome
デバイスの幅: 320px
デバイスの高さ: 534pxFirefox および Firefox ベータ版
device-width: 320px
device-height: 533px画面: 480x800
ピクセル比: 1.5 (6 つのブラウザーすべてについて mqtest.io で報告)
android - ViewGroup の子がデバイスの幅を超えた場合、強制的に次の行に移動する
一緒に水平方向に配置されているいくつかのビューを持つビュー グループが必要です。私のコードの問題は、すべて問題ありませんが、子の数が増えると、すべての子が水平方向に一緒に配置され、デバイスの幅を超えます。デバイスの幅を超える場合は、強制的に次の行に移動する必要があります。
これは私のコードです:
注:linear_layout_containerビュー グループにはすべてのビューが含まれ、それらはすべてlinearLayoutビュー グループの子です。
html - デバイスの幅が 400px 未満の場合、HTML/CSS が応答しない
誰かがこのコードをざっと見てアドバイスをくれれば、それは大歓迎です。
iPad と PC の両方の画面で正しくサイズ変更される画像がいくつかあります。ただし、電話で試してみたり、ブラウザのウィンドウ サイズを小さくするとすぐに、画像のサイズが正しく変更されません。
CSS:
HTML:
画像は幅 170px で、1 行に 6 個あります。マウスをそれらの上に置くと、(CSS を介して) すべてが灰色で強調表示されます。
ブラウザのサイズを電話のサイズに変更すると、以前よりも大きくなります!
アドバイスをいただければ幸いです。
誰かがこの件について知識があり、助けてくれる場合は、私に連絡して、必要な情報を提供してください.
ありがとう。
css - CSS3 メディア クエリ - Chrome コンソール
さまざまなビューポートにメディア クエリを使用しようとしています。ただし、Google Chrome コンソールでそれを拾っていないようです。
次のコードがあります。
また、次のメタ タグとともにスタイルシートを index.html に含めました...
なぜこれがうまくいかないのか、私には理解できないようです。
前もって感謝します。
google-chrome - viewport device-width: 不適切な幅 / Safari ランドスケープでの大きなフォント (Chrome では正しい)
<meta name = "viewport" content = "width = device-width"レスポンシブ HTML5 ページに追加した後1em、iOS Safari を含むすべてのモバイル デバイスでデフォルト フォントが適切で使用可能なサイズで表示されます。ただし、画面を縦向きの縦向きから横向きの横向きに回転すると、フォント サイズが変更されます (インターフェイス要素は同じままでも、ページ上のすべてが大きくなりすぎます)。この変更は、iOS の Safari でのみ発生します。 Android の Chrome にはありません。
Safariで回転するとフォントサイズが変わるのはなぜですか? 上記のメタは、サイトがすべての画面サイズに対応するように最適化されていることを示すのに十分だと思いましたが、そうではありませんか?
iOS Safari で指定する必要がある特別な癖はありますか? device-width正確に指定されているにもかかわらず、スケーリングするとサイトが表示できないと想定されるのはなぜですか?!
html - ビューポート タグがほとんどのモバイル デバイスでデバイスの幅を適切に使用しないのはなぜですか?
以下のメタタグを使用しています。
モバイルからウェブサイトを開くと、まったく反応しません。CSSコードを変更していません。
私を助けてください！ありがとうございました！
css - *-device-width などの * をプレフィックスとして付けたメディア クエリは、@media ルールの有効なクエリですか?
当社のサイトの一部では、@media ルールを使用しており、クエリで device-width を使用しています。
このリンクにたどり着いたとき、私は会社のサイトの CSS を検索して古いルールを見つけました。著者は、 などのアスタリスクの接頭辞*-device-widthをメディア クエリで使用できると主張しています。これは Google リンクであるため、この主張は正しいに違いありません :p
現在のセットアップではこれをテストできません。このルールを W3Schools とそのセットアップに適用しようとしましたが、うまくいかないようでした (ただし、有効なクエリは機能しました)。ここの @media の MDN ページでは、このクエリの有効性について言及していません。このような WHATWG ドキュメントも、このような W3C ドキュメントも同様です。
ルールがANDの両方に適用されるように、アスタリスクのプレフィックスなど*-device-widthはメディア クエリに対して有効ですか?max-device-widthmin-device-width
viewport - それはビューポートの問題ですか、それとも何ですか？
Body のウィンドウ サイズは計画どおりですが、Mozilla Browser でマウスホイールをクリックするか、iPad で右/下にスクロールすると、このマージンが得られます。これは、最初にドキュメントに表示されてから非表示になるコンテンツが原因で発生していると思いますが、そうではない可能性があります...どうすればこの問題を解決できますか? 前もって感謝します！
ところで、私はで使用<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">します<head>
