10

タブレットを検出する完璧な方法を探しています。メディア クエリを使用すると、特定の CSS の最小幅と最大幅を設定できます。ただし、soms デスクトップ モニターよりも解像度が高いタブレットもあります。そのため、競合が発生します。

Javascript (Modernizr、Detectivizr) を使用すると、タブレットが認識され、HTML タグのクラス 'tablet' を使用してこれを HTML に設定します。しかし... すべてのユーザーが Javascript を有効にしているわけではありません。

したがって、(私の意見では) CSS を使用してタブレットを検出する必要があります。これに対する完璧な解決策を知っている人はいますか？

事前にサンクス！

4

3 に答える 3

4

CSS メディア クエリを使用すると、妥当な精度を得ることができます。

@media only screen 
and (max-device-height : 768px) 
and (max-device-width : 1024px)
{
    /* CSS Styles go here..... */
}

上記は、デバイスの画面サイズが1024x768 (デスクトップの一般的な画面サイズ)未満であることを検出する必要があります。

上で述べたように、一部のタブレットの画面サイズは 1024x768 より大きいため、CSS を使用するだけでは完璧ではありません。

精度を上げるために私が知っている唯一の方法は、javascript を使用してuserAgent文字列を盗聴することです。GeenHenk がリンクした質問 ( What is the best way to detect a mobile device in jQuery? ) を参照してください。

于 2013-03-22T09:27:10.160 に答える
2

に対してチェックできますnavigator.userAgentが、そのJavaScriptは次のようになります。

var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);

編集

私はこれを見つけました：

@media only screen and (max-width: 760px) {
    /* Styles for phones */
}

これは、ブラウザの幅がスマートフォンのサイズであるかどうかを検出しているようです。

詳細については、この質問の回答を参照してください

于 2013-03-22T08:54:40.873 に答える
2

mobile-detect.js の使用はどうですか? 私は自分のプロジェクトでそれを利用しました - それは素晴らしい.tablet()方法です。

更新 (maxshuty 用)

私は次の方法でそれを使用しています：

var md = new MobileDetect(window.navigator.userAgent);
if( md.tablet() || !md.phone() ) {
    // your code here
}
于 2015-10-21T16:20:26.760 に答える