ブラウザがハンドヘルド デバイスで使用されているかどうかを検出するにはどうすればよいですか?

ハンドヘルド デバイスのブラウザの使用状況の確認

ハンドヘルド デバイス (iOS/Android スマートフォン/タブレット) のブラウザが使用されているかどうかを検出するには、次のことを考慮します。次のテクニック:

方法 1: ハンドヘルド メディアを使用するクエリ

ハンドヘルド メディア クエリは、ハンドヘルド デバイスを識別するための一般的なアプローチです。ただし、おっしゃるとおり、すべての場合に期待どおりに機能するとは限りません。これは、一部の最新のスマートフォンがこのメディア クエリでは「ハンドヘルド」デバイスとみなされない可能性があるためです。

ハンドヘルド メディア クエリを使用するには、次の CSS コードを試すことができます:

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

方法 2: デバイス幅のメディア クエリを使用する

別のアプローチは、デバイス幅のメディア クエリを使用することです。このクエリは、最大画面幅に基づいてデバイスをターゲットにします。たとえば、最大画面幅 480 ピクセルのデバイス (スマートフォンやタブレットで一般的) をターゲットにするには、次のコードを使用できます:

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

方法 3: ポインター入力の検出

タッチスクリーンを備えたデバイス (スマートフォンやタブレットなど) は通常、「なし」または「粗い」ポインター入力を使用しますが、従来のマウスまたはトラックパッドを使用する Web ブラウザは、「細かい」ポインタ入力を登録します。この違いを利用してハンドヘルド デバイスを検出できます。

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

これらのメディア クエリをコードに組み込むことで、ユーザーがハンドヘルド デバイスから Web サイトにアクセスしているかどうかに基づいて要素のスタイルを動的に調整できます。または従来の Web ブラウザ。

以上がブラウザがハンドヘルド デバイスで使用されているかどうかを検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。