次のHTMLメタタグとスタイルクエリを使用して、iPad / Safariブラウザーをターゲットにできるようにします（Windows / Linuxブラウザーと比較したiPadのいくつかのマイナーなバリエーション）。
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="style/tablet.css" />
しかし、tablet.cssファイルは小さなラップトップ（つまり、1024px未満のラップトップ）にもロードされており、大きな画面にズームインしたときにも機能するようです。
デバイス幅を使用することは、実際のデバイス/ブラウザーを区別するための非常に良い方法ではありませんが、インターネットでの私のすべての狩猟は、これがそれを行うための最良の方法であると言っています。
他に方法はありますか？
これを行うには、javascript に戻す必要があります。
modernizr を使用して、タッチ イベントのサポートを検出できます。
http://modernizr.github.com/Modernizr/touch.html
Modernizr はタグにクラスを追加する<html>ため、タッチ対応デバイスを非常に簡単にターゲットにできます。
または、より精度が必要な場合は JavaScript を使用してユーザー エージェントを検出しますが、更新や新しいタブレット OS のリリースに合わせて定期的に更新する必要があります。
@media クエリをもう少し細かくすると、不要なデバイスやブラウザーをより適切に除外するのに役立ちます。
<link rel="stylesheet" media="only screen and (max-device-width: 1024px) and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2)" href="style/tablet.css" />
-webkit-min-device-pixel-ratio:and の使用orientationは、画面の寸法よりも iPad/Phone に固有のものです。