問題タブ [media-queries]

javascript を使用して、ビューポートの幅ではなく、ユーザーのデバイスの幅を取得する方法はありますか?

私が言えるように、CSSメディアクエリはこれを提供します

と

これは、横向きのスマートフォンをターゲットにしている場合に便利です。たとえば、iOS の max-width:640pxwill の宣言は、iPhone 4 でもランドスケープ モードとポートレート モードの両方をターゲットにします。私が知る限り、これは Android には当てはまりません。デスクトップ デバイスをターゲットにせずに。

ただし、デバイス幅に基づいて JavaScript バインディングを呼び出している場合、ビューポート幅のテストに限定されているように見えます。これは、次のような追加のテストを意味します。

デバイス幅が css で利用可能であるというヒントを考えると、これは私にはエレガントに思えません。

cssメディアクエリはある種のイベントリスナー（ウィンドウのサイズ変更をリッスンしている）ですか、それともブラウザーはそれらを時々チェックしますか？手紙の場合、いつ、どのくらいの頻度で？

以下のJSにある種のメディアクエリを追加したいので、モバイルまたは画面<767pxでは、高さは280pxにしかアニメーションしません。これがCSSで達成できるかどうかも興味があります

Javascript

どうもありがとう

私が取り組んでいるプロジェクトは、コンテンツを表示するグリッドで構成されています。グリッド上の各アイテムのサイズをビューポートのサイズの 4 分の 1 に変更したいと考えています。これは Javascript を使えば非常に簡単ですが、各項目のサイズを認識する必要があるバックエンド要素がいくつかあります。

Timthumb を使用してアイテムの画像を適切なサイズにリサイズしているため、ビューポートの幅を検出し、適切な値 (ビューポートの幅 / 4) を各アイテムを提供する php に送信する必要があるため、Timthumb に使用に適したサイズ。

この問題に対する最善のアプローチは何でしょうか?

デスクトップおよび iPad 用の Web サイトを設計しています。iPad とデスクトップ PC には同じ Web サイトが使用されます。

サイトのデザインの幅は 1024px で、iPad のポートレート モードでは 768px になります。私の質問は、デザインを作成し、CSS を作成する際に考慮すべきことです。そのため、ポートレート モード用の特定の CSS を作成する必要はありません。

メディアクエリを使用せずに、両方の向きに柔軟なレイアウトを作成したい。

OK、このスクリプトは css メディア クエリを使用してメディア タイプをチェックします。アイデアは、メディア クエリを使用して div (pre-DOM) とスタイル要素を作成し、スタイルが適用されている場合、メディア クエリは true であるということです。これは Firefox 5 では機能しますが、IE 9 では機能しません。

これは FF 5 と Chrome コンソールでは "5 1" を返しますが、IE 9 では "919 0" を返します。IE はここで何をしているのですか? どうすれば回避できますか?

関数呼び出しの例を次に示します: mediaQuery('screen and (min-width: 480px)').match

いくつかのテストの後、幅が画面幅の 100% に一致することがわかりました。メディア クエリが IE で機能しないのはなぜですか?

背景が繰り返されるdivがあります。背景画像は50pxx50pxです。

繰り返し画像の高さは50ピクセルなので、divの高さを50の倍数にします。これにより、背景画像が繰り返されることが保証されますが、divのエッジによって切り取られることはありません。

1. メディアクエリなしでこれを行う純粋なCSSの方法はありますか？
2. メディアクエリでこれを行う方法はありますか？
3. JavaScriptで可能であることは知っていますが、JavaScriptを使用する必要はありません（このタイプのスタイルのオブジェクトはたくさんあり、$.each()すべてを使用する必要はありません）。

http://www.taramenconi.byethost11.com/で私のサイトを見ることができます。1024 x 768 用に設計しました。また、一部の画面では大きく引き伸ばされているように見えることにも気付きました...大きなブラウザーを埋めるために意図的に背景を作成しましたが、コンテンツ領域は同じサイズのままにしたいと考えています。どうすれば修正できますか？

これが私のcssです：

CSSwidthとの違いは何ですか？device-width

これに関してすでにいくつかの質問があることは知っていますが、メディアクエリの観点から、デスクトップ/モバイル/タブレットなどのブラウザ/デバイスをスニッフィングするためにこれらを理解したいと思います。