-2

ウェブサイトのデスクトップ版は見栄えが良く、スタイルも完璧です。しかし、iPad で Web サイトを表示すると、特定の領域でより多くのスタイリング (より多くのパディングとマージン) が必要になります。

私がやりたいのは、特別なクラスを div に追加して、iPad で表示したときにのみ適用されるようにすることです。次に、特定のクラスがすべての余分なスタイリングを処理できます。

ユーザーが iPad を介して表示しているかどうかのアウェイ トラックはありますか? どうすればいいですか？解決策は何ですか？

4

3 に答える 3

3

Jqueryを使用してモバイルデバイスを検出する方法

var isiPad = /ipad/i.test(navigator.userAgent.toLowerCase());

if (isiPad)
{
  ...
}
于 2013-03-19T08:35:45.270 に答える
2

これを試して

var ipad = navigator.userAgent.match(/iPad/i) != null;

if (ipad) $("#div").addClass('ipadClass');

于 2013-03-19T08:27:47.827 に答える
1

ブラウザー/デバイスの検出は、正しく行うのが難しいことで有名です。一部は歴史的な理由 (競合するレンダリング エンジン、ユーザー エージェントのスプーフィング) と、一部はデバイスによって公開されたユーザー エージェントが多すぎるためです (エージェント/デバイスの完全でないリストについては、こちらを参照してください)。 ）。

ここでの回答のメソッドを (単純に) 使用することも、おそらくUA-Parser-js (JavaScript ベースの User-Agent String Parser) のようなものを使用して、以下を提供しようとすることも可能です。

  • ブラウザ
  • エンジン
  • OS
  • デバイス

（動作しますが、欠陥があります）。

特にiPad で使用する Web ベースのアプリを設計している場合を除き、ブラウザー/ビューポートの幅に基づいてコンテンツをリフローする多数の CSS メディア クエリを利用する必要があります。モバイル デバイスの例は次のとおりです。

@media only screen and (max-device-width: 480px) {
    div#wrapper {
    width: 400px;
}

Twitter ブートストラップにはレスポンシブ レイアウトも付属しています。どちらの場合も、ポートレート モードとランドスケープ モードの両方に対応する必要があります。また、iPad のバージョンと解像度が異なるため、特に Retina ディスプレイの画像の品質に影響します。後期モデルのディスプレイ:

第 1 世代および第 2 世代: 1024 × 768 ピクセル (132 PPI 4:3 アスペクト比)

第 3 および第 4 世代: 2048×1536 ピクセル (264 PPI)

ミニ: 1,024x768 ピクセル (163 PPI)

于 2013-03-19T13:00:48.437 に答える