問題タブ [media-queries]

iPad/iPhoneと古いiPhoneの両方に代替レイアウトを実装しようとしています。

@media私は、CSS3仕様から使用するのが最善の方法であることを確立しました。

そのため、これらはその瞬間の私のメディアクエリです。

上記は小さなデスクトップとラップトップの画面用です。

上記はiPadと非常に小さなデスクトップ/ラップトップ画面用です。

上記は一般的なiPhone3GSおよびモバイルデバイス用です。

ただし、SteveJobsのすべて歌うすべて踊る「Retina」ディスプレイを搭載した新しいiPhone4は、ピクセル比が2-1であることを意味します。つまり、1ピクセルは実際には2x2ピクセルとしてブラウザに表示され、解像度（960x640-モバイルデバイスのレイアウトではなくiPadのレイアウトをトリガーする）ので、これには別のメディアクエリが必要です（これまでのところ、Webkitでのみサポートされています）。

さて、問題は...私は私の素敵な光沢のある新しいiPhone4レイアウトをiPhone3GSとモバイルデバイスのレイアウトと融合させたいと思っています。どちらもまったく同じ内部CSSコードを持っているからです。

したがって、私の質問をします。

@mediaiPhone 4、3GS、その他の携帯電話の両方を同じスタイルにポイントするルールを作成するにはどうすればよいですか？

ユーザーがブラウザのサイズを変更すると、CSSメディアクエリが機能しないと思いますか？メディアクエリを有効にするには、ユーザーはページを更新する必要がありますか？おそらくJSでメディアクエリを更新するにはどうすればよいですか？現在、JSを使用してサイズ変更時にウィンドウサイズを検出していますaddClass()

やあみんな、私はクロームでブラウジングしているので、ネイティブのcssメディアクエリのサポートに甘やかされています。ただし、すべてのブラウザでメディアクエリを使用できるようにしたいので、

このファイルのファイルサイズはかなり大きいので、条件付きタグを使用してこのファイルを含めることができるかどうか疑問に思います。

お気に入り …

メディアクエリをサポートしていない他の重要なブラウザを検討する必要がありますか？モバイルAndroidブラウザなどはどうですか。Safari、Firefox、Chromeがサポートしていることは知っています。

コンパス フレームワークとブループリント/グリッドの依存関係を介して saas を使用しています。次のように、メディアクエリを使用して列の幅を設定できるようにしたい:

これは /stylesheets/screen.css にコンパイルされます:

ただし、screen.css の残りの値は適切に設定されていません。$blueprint-grid-width 変数は実行時ではなくコンパイル時に読み取られるため、これは理にかなっていると思います。

メディア クエリを使用して画面解像度を取得することにより、異なるグリッド幅のレイアウトを出力する方法はありますか?

関連する github の問題:
https://github.com/chriseppstein/compass/issues/302

デスクトップと iPhone の両方に表示される Web サイトがあり、メディア クエリを使用してさまざまなスタイルシートを提供します。たとえば、常に reset.css をロードします。ユーザーがブラウザ ウィンドウのサイズを変更する場合) 代わりに iphone.css をロードしますが、desktop.css をロードしないでください。ユーザーが iPhone を移動したかどうかに基づいて、orientation.css ファイルも追加します。

例えば

Web サイトを構築する方法のため、すべてスタイルシート内で行う必要があり、HTML で 1 つの css ファイルのみを使用したいのです。

誰でも私が望むものに修正するのを手伝ってもらえますか? 乾杯。

私はモバイルバージョンを処理するためにメディアクエリを使用してウェブサイトを書いています。メインのcssファイルにこれを出力させることは可能でしょうか

そして、電話のcssファイル内でこれを出力します。

また、メディアクエリでテキストを非表示にすることは可能ですか？

メディア クエリを使用してモバイル デバイスをサポートする Web サイトを開発しましたが、Windows Mobile 7 は影響を受けないようです。IE がメディア クエリをサポートしていないことはわかっているので、WinMob でも同じだと思います。この電話で別のページをロードする方法はありますか??

Javascript には、アクティブなメディア クエリを特定する直接的な方法 (CSS コードの解析を含まない) がありますか?

たとえば、次の 2 つのクエリがあります。

clientWidth を解析して確認せずに、これらのうちどれが true と評価されたかをどのように判断できますか。

こんばんは、

デスクトップ エクスペリエンス用に最適化された現在の CSS を使用した Web サイトがあります。私は IwebKit5 を使用して Iphone css に取り組んでおり、外出先でのユーザー エクスペリエンスを向上させています。

私はJavaScriptを使用していて、ユーザーエージェントを解析して、使用するCSSを検出していました。JavaScript の使用を避ける方法を探していたところ、メディア クエリ機能を発見しました。

これは私が試したもので、デスクトップではうまく動作します (Iphone css は無視されます) が、Iphone では mobile.css と desktop.css の両方が読み込まれていることに気付いたので、それを回避する方法を見つけようとしています。この動作を回避するために追加するオプションは何ですか?

ありがとう ！