すべてのタブレット（「Pro」バージョンを含む）、ラップトップなしのメディアクエリ

Question

Apple iPad Pro（1366px幅）とMicrosoft Surface Pro 3（1440px幅）を含む、デバイスがタブレットのときにCSSスタイルを適用したいデバイスがラップトップの場合（1024pxからスクロールバーまたはそれ以上を差し引いたもの）ではありません。このコードを使用する場合：

@media (min-width: 768px) and (max-width: 991px) and (max-width: 1440px) { 
    /* 
     non-smartphone touchscreen optimized styles here 
     large buttons, menus with everything visible without :hover etc. 
    */ 
} 

大型タブレット（992px-1440px）のすべてのスタイルが正しくありません。私は、メディアクエリでさまざまな組み合わせや最小/最大を試してみましたが、レンダリングは少なくとも1つのデバイスで常に間違っていました。どうすればこの問題を解決できますか？

Answer 1

タブレット解像度が多くの非タッチデバイスと重なっていることを考えれば、解像度に応じて機能しない場合があります。 ユーザエージェントの文字列に依存するか、機能の検出に依存する必要があります。

あなたは、さまざまなデバイスタイプのCSSを定義することは些細になるように、それらの両方は、あなたのルート要素にクラスを追加modernizrかdevice.js

を試すことができます。 device.jsは今更新されていませんが、開始するのは簡単です。