サイズに関係なく、すべてのタブレットと電話をターゲットにしたいとしましょう。このためのメディアクエリはありますか? サイズを指定せずにこれを行うことは可能ですか？それとも、サイズを使用してモバイル デバイスをターゲットにする唯一の方法であり、デスクトップではありませんか?
14938 次
3 に答える
7
私はこれに数日間苦労してきましたが、ハンドヘルド デバイスを確認する良い方法は max-device-width です。デスクトップ PC はこれをブラウザーに送信しませんが、ほとんどの (すべてではないにしても) ハンドヘルドはこれを使用します。
私の場合、特定の幅を下回ると、すべてのデバイス (デスクトップを含む) でサイトの圧縮バージョンを表示したいと考えていました。
@media all and (max-width: 640px)
ただし、使用されている特定のオーバーレイ ポップアップposition: fixedはハンドヘルドでのみ変更する必要がありました (css プロパティはすべてのデスクトップ ブラウザーで機能しますが、すべてのハンドヘルドでは機能しないため)。そのために、追加のルールを使用しました。
@media all and (max-device-width: 640px)
ここでは、640 未満のすべてのハンドヘルドをターゲットにしていますが、デスクトップ ブラウザはターゲットにしていません。ちなみに、これはデバイスの幅が 640px よりも大きいため、iPad もターゲットにしていません (これは私が望んでいた方法です)。
すべてのデバイスをターゲットにしたいだけの場合は、幅に関係なくデバイスを除外しないように、最小幅 (1px) を低くしてください。
于 2012-04-02T10:53:21.643 に答える
0
純粋な css アプローチではあまり運が良くないと思います。modernizer.js アプローチに沿って何かをしたいと思うでしょう。私たち JS は、デバイスを検出し、それに基づいてボディにクラス名を追加します。
jQueryでモバイルデバイスを検出する最良の方法は何ですか?
次に、さまざまなサイズの特殊なケースのモバイル デバイスへのメディア クエリにそのクラスを含めます。
于 2014-07-18T18:18:42.110 に答える