68

ハンドヘルドブラウザが使用されているかどうかを検出する方法はありますか（iOS / Androidフォン/タブレット）？

ハンドヘルドデバイスのブラウザで要素の幅を半分にすることを目標にこれを試しましたが、違いはありません。

width: 600px;
@media handheld { width: 300px; }

それはできますか？もしそうなら、どのように？

編集：私が使用したjmaesの回答の参照ページから

@media only screen and (max-device-width: 480px)。

4

8 に答える 8

39

更新（2016年6月）：デバイスランドスケープがタッチデバイスとそうでないものの間の境界線をゆっくりとぼやけさせているため、すべての解像度でタッチとマウスの入力をサポートしようとしています。iPad Proは、13インチのラップトップの解像度でタッチオンリーです。現在、Windowsラップトップにはタッチスクリーンが付属していることがよくあります。

他の同様のSO回答（この質問に関する他の回答を参照）には、ユーザーが使用しているデバイスの種類を把握するためのさまざまな方法がありますが、どれも絶対確実なものではありません。どうしてもデバイスを特定する必要がある場合は、これらの回答を確認することをお勧めします。

たとえば、iPhoneはhandheldクエリ（Source）を無視します。同様の理由で、他のスマートフォンもそうだとしても驚かないでしょう。

私がモバイルデバイスを検出するために使用する現在の最良の方法は、その幅を知り、対応するメディアクエリを使用してそれをキャッチすることです。そのリンクには、人気のあるものがいくつかリストされています。簡単なグーグル検索はあなたが必要とするかもしれない他のものをあなたに与えるでしょう、私は確信しています。

iPhone固有のもの（Retinaディスプレイなど）については、私が投稿した最初のリンクを確認してください。

于 2013-02-18T17:41:20.587 に答える
38

これが私がそれをした方法です：

@media (pointer:none), (pointer:coarse) {
}

https://stackoverflow.com/a/42835826/1365066に基づく

于 2018-05-12T02:18:16.833 に答える
13

モバイルデバイスを検出せず、代わりに固定デバイスを選択してください。

現在（2016年）、ほとんどの最新のブラウザーで機能するように見える1インチ/ cm /ピクセルあたりのドット数を検出する方法があります（http://caniuse.com/#feat=css-media-resolutionを参照）。比較的小さな画面、向きは関係ありません、そして静止したコンピューターモニターを区別する方法が必要でした。

多くのモバイルブラウザはこれをサポートしていないため、すべての場合に一般的なcssコードを記述し、この例外を大画面に使用できます。

@media (max-resolution: 1dppx) {
    /* ... */
}

Windows XPと7の両方のデフォルト設定は、1ピクセルあたり1ドット（または96dpi）です。他のオペレーティングシステムについてはわかりませんが、これは私のニーズに非常に適しています。

編集：dppxはInternet Explorerでは機能しないようです。代わりに（96）dpiを使用してください。

于 2016-07-09T11:58:46.690 に答える
10

モバイルデバイスの検出

関連する回答：https ：//stackoverflow.com/a/13805337/1306809

本当に絶対確実な単一のアプローチはありません。最善の策は、必要に応じてさまざまなトリックを組み合わせて組み合わせ、より広範囲のハンドヘルドデバイスを正常に検出できる可能性を高めることです。いくつかの異なるオプションについては、上記のリンクを参照してください。

于 2013-02-18T18:00:41.843 に答える
5

モバイルデバイスを検出するためのはるかに信頼性の高い方法は、navigator.userAgent文字列を調べることだと思います。たとえば、私のiPhoneでは、ユーザーエージェント文字列は次のとおりです。

Mozilla / 5.0（iPhone; MacOSXのようなCPUiPhoneOS 10_3_2）AppleWebKit / 603.2.4（GeckoのようなKHTML）バージョン/10.0モバイル/ 14F89Safari / 602.1

この文字列には、iPhoneとモバイルの2つのわかりやすいキーワードが含まれていることに注意してください。私が持っていないデバイス用の他のユーザーエージェント文字列は、次の場所で提供されています。

https://deviceatlas.com/blog/list-of-user-agent-strings

この文字列を使用して、次のコードを使用して、WebサイトのJavaScriptブール変数bMobileをtrueまたはfalseに設定します。

var bMobile =   // will be true if running on a mobile device
  navigator.userAgent.indexOf( "Mobile" ) !== -1 || 
  navigator.userAgent.indexOf( "iPhone" ) !== -1 || 
  navigator.userAgent.indexOf( "Android" ) !== -1 || 
  navigator.userAgent.indexOf( "Windows Phone" ) !== -1 ;
于 2017-06-20T21:08:13.443 に答える
2

多くのモバイルデバイスの解像度は非常に高いため、それらとはるかに大きな画面を区別するのは困難です。この問題に対処するには、次の2つの方法があります。

次のHTMLコードを使用して、ピクセルをスケーリングします（小さいピクセルをユニットピクセルのサイズ（96dpi）にグループ化すると、ユニットpxはすべての画面で同じ物理サイズになります）。これはあなたのウェブサイトのほとんどすべての規模に影響を与えることに注意してください、しかしこれは一般的にサイトをモバイルフレンドリーにするとき行く方法です。

<meta name="viewport" content="width=device-width, initial-scale=1">

または、単位の代わりに@mediaクエリで画面幅を測定すると、解像度に関係なく、物理的に小さい画面を扱っているかどうかがわかります。cmpx

于 2020-04-05T01:03:16.097 に答える
-2

私はこれが古いスレッドであることを知っていますが、これは誰かを助けるかもしれないと思いました：

モバイルデバイスの高さは幅よりも大きく、逆に、コンピューターの幅は高さよりも大きくなります。例えば：

@media all and (max-width: 320px) and (min-height: 320px)

だからそれは私が推測するすべての幅に対して行われなければならないでしょう。

于 2017-06-05T08:51:43.203 に答える
-7

単純！これをCSSファイルの下部に投げると、CSSのこの部分が電話内で変更されます：-

/* ON A PHONE */
@media only screen and (max-width: 600px) { /* CSS HERE ONLY ON PHONE */ }

そして出来上がり！

于 2021-02-12T17:31:57.600 に答える