問題タブ [media-queries]

ページが壁に投影されている場合にのみページにスタイルを適用しようとしています (プロジェクターによって、誰かがプレゼンテーションを行っている場合)。現時点では、フルスクリーン モードの Opera でのみこれを取得できます。

@media projection他のブラウザで有効にする方法はありますか? また、投影元のラップトップではなく、投影にのみ適用する方法はありますか?

そうでない場合、これに対する実行可能な回避策はありますか? CSSでスライドショーを作成しようとしていますが、プレゼンターのラップトップに追加のコントロールを備えた「プレゼンタービュー」も提供しています。

周辺地域での助けは大歓迎です。

メディア クエリを使用して、特定のブラウザ幅でフロートを無効にしようとしています。この if ステートメントは、現在のサイズでページをリロードした場合にのみ機能します。CSSプロパティが変更されたときにjQueryに変更を適用させることは可能ですか?

おそらく、2番目の $('.two-column li') で $(this) または何かを使用することになっていますが、なぜ機能しないのかわかりません。jQueryについてはよくわかりません。

編集：

デフォルトでは、2 列の li のスタイルは次のようになります。

そして、言ってみましょう...

これは機能します。横幅が 767px 以下になると浮きなくなります。上記の醜いjqueryは部分的に機能しているようです。デフォルトでは equalheights プラグインが実行されますが、幅が 767px 未満の場合、プラグインは実行されません。私の問題は、それが実行されるかどうかは、ページが読み込まれたときのブラウザーのサイズに依存することです。レスポンシブ デザインのメディア クエリのように動的にしようとしています。

そして、ドキュメントの準備ができたときにそれを呼び出しました。

より多くの調査と以下のコメントの助けを借りて、現在、ドキュメントの準備ができていることを含め、このようになっています...ただし、サイズ変更ではまだ実行していません。更新が必要です。

IE9でのみ発生する奇妙な問題が発生しています。デスクトップレイアウトとモバイルレイアウトのWebページで作業しています。同じHTML、異なるCSS。問題は以下のコードで発生します：

IE9を除くすべてのブラウザは、必要に応じてデスクトップサイトを表示します。モバイルブラウザはモバイルレイアウトを正しく表示します。IE9の問題は、モバイルレイアウトも表示されることです。

上記のコードから「only」と「screen」という単語を削除すると、IE9はデスクトップサイトを正しく表示します。問題は、モバイルブラウザにもデスクトップサイトが表示されることです。私はこれについていくつかの調査を行いましたが、この問題については何も見ていません。

読んでくれてありがとう、

ジョン

CSS でメディア クエリを使用して作業しているサイトを「動員」しようとしています。

私は自分で Android フォンを持っているので、それをテストしており、良い結果が得られています。

iPhone でテストしたいのですが、デバイスがありません。ネットを検索し、いくつかの推奨シミュレーターをダウンロードしましたが、メディア クエリを認識しないようですが、テストするデバイスがなければ、できます。私のクエリは機能しません-またはそれらを認識しないエミュレーターの場合。

Windowsで動作し、メディアクエリを認識するiPhone / iPad用のエミュレーターを知っている人はいますか?

マイク

プロジェクトで css メディア クエリを使用して、任意のサイズの画面で動作するサイトを作成しています。CSSの場合と同じように、異なるjquery関数をトリガーしようとしています。

たとえば、ブラウザのサイズが 1000px ～ 1300px の場合、次の関数を呼び出したいと思います。

しかし、ブラウザのサイズが 1000px を下回ると、js は処理を停止します。などなど。

これが可能かどうかはわかりませんが、ブラウザー ウィンドウのサイズに基づいて異なる js 環境を作成する既存のソリューションまたはプラグインがある可能性があります。なんらかの形式で条件文を作成できると思います。何かご意見は？

私は私のcssで次のメディアクエリを使用しています：

これは私の古いiphone3gでは問題ないように見えます...しかし、向きを縦向きから横向きに変更すると、爆発します..大きすぎ、広すぎます。

私はこれを試しました：

助けにはならなかった。

助言がありますか？

ランドスケープ固有のクエリは入れたくありません。可能であれば、一般的なクエリが必要です。

（はい、画面をピンチダウンするのはちょっとうまくいきますが、私が探しているユーザーエクスペリエンスではありません。）

ありがとうJD

使用時

iPhone Mobile Safari では、デバイスを回転させると CSS が変更されます。

このコードが PhoneGap フレームワーク (0.9.5.1) 内で使用されている場合、同じページは異なる CSS をロードしません。また、

これは修正される可能性がありますが、向きの問題が残ります。この問題を解決するためのヒントをいただければ幸いです。前もって感謝します - アレックス

Webkitブラウザ（Chrome / Safari）、CSS3メディアクエリ、displayおよびfloat自分のサイトで問題が発生しました。nav私のウェブページのデフォルトのスタイルは、要素を右にフロートさせることdisplay:inline-blockです。ウィンドウのサイズがモバイルサイズに変更されると、メディアクエリはウィンドウのスタイルを次のように変更しますfloat:none; display:block。この問題は、ブラウザのサイズを通常に戻すと発生します。ナビゲーション要素は、その高さの分だけドロップダウンして表示されます。ここにいくつかの写真とマークアップがあります：

ウィンドウが正常でサイトが正しく表示されている：

ウィンドウモバイルサイズ、サイトが正しく表示される：

ウィンドウのサイズが通常に戻り、サイトが正しく表示されない：

これが通常のスタイルですnav（そして、はい、IE7のものを別のスタイルシートに移動します...）

これがスタイルを変更するメディアクエリですnav：

それで、これはWebkitのバグですか、それとも予想される動作ですか？私は何か間違ったことをしていますか、それともWebkitですか？それがバグである場合、誰かが良い回避策を知っていますか？ライブサイトはこちらです。もう情報を提供する必要がある場合はお知らせください。ありがとう。

jQueryを使用して、HTMLページのどこにでもダブルクリックしてメッセージを残すことができるツールをまとめています。メッセージの配置に関係する障害にぶつかりました。

私が現在テストしているコード：

これにより、マウスクリックの位置に新しい「メッセージ」が作成されます。これはある程度機能しますが、ブラウザウィンドウのサイズが変更されるとすぐに、「メッセージ」の位置がずれます。私は最終的にメッセージを保存する（そしてそれらを取得する）ことを望んでいるので、すべてのブラウザーのすべてのユーザーの異なる場所にメッセージをロードすることは理想的ではありません。そのページがメディアクエリを使用している場合でも、メッセージをページレイアウトに添付したい。

この問題についての私の理解は、ユーザーがクリックした最も近い要素を基準にしてメッセージを配置する必要があるということです。質問は。どうすればいいですか？

ヒントやヒントをいただければ幸いです。

2011年4月7日更新

私が以下に持っていた答えのほとんどは、実際には私が求めているものではありません。私の設定を示すために、私のページの例をJSfiddleにアップロードしました。ここでの問題は、メッセージを相対的な位置に添付することです。これにより、ブラウザウィンドウのサイズが変更されると、メッセージがコンテンツとともに移動します。

例えば。ページの2番目の段落にメッセージを添付する場合、ブラウザ/デバイスの幅に関係なく、そのメッセージをその段落に固定するにはどうすればよいですか。私が知る限り、メッセージを相対的な位置に配置するために使用できる最も近いブロックレベルの要素（またはIDまたはクラスを持つ要素）を確立する必要があります。

それが質問をクリアすることを願っています＆あなたのすべての提案に感謝します。

私は現在、Firefox や Chrome などの既定のブラウザーでうまく機能する Web サイトのモバイル バージョンに取り組んでいます。Base は、最大幅 440px (@media screen および (max-width: 440px)) のメディア クエリを使用した流動的なレイアウトで、ポートレート モードをターゲットにします。

小さい画像や div などの他の設定と一緒に、デフォルトのブラウザーでフォント サイズが変更されています。ただし、HTC Android フォンでデフォルトのブラウザーを使用してサイトをテストすると、通常のスタイルではなく、最大幅 440 のスタイルしか表示されません。 480px の幅に基づいています。

この動作の問題は何でしょうか? モバイル版は httpp://www.seeyouzoeningouda.nl/m にあります。

コードのどの部分を表示すればよいか本当にわからないため、CSS を投稿していません。CSS は、デフォルトの HTMl5 ボイラープレート テンプレート (www.html5boilerplate.com) に基づいています。