ページのピクセル幅と高さは、指定されている場合、メタビューポートタグだけでなく、方向にも依存します。 iPad 1ブラウザーでjqueryの$（window）.width（）および$（window）.height（）を実行した結果は次のとおりです。
ページにメタビューポートタグがない場合：
- ポートレート：980x1208
- 風景：980x661
ページに次の2つのメタタグのいずれかがある場合：
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1">
- ポートレート：768x946
- 横長：1024x690
<meta name="viewport" content="width=device-width">の場合：
- ポートレート：768x946
- 横長：768x518
<meta name="viewport" content="height=device-height">の場合：
- ポートレート：980x1024
- 横長：980x1024
<meta name="viewport" content="height=device-height,width=device-width">の場合：
- ポートレート：768x1024
- 横長：768x1024
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">を使用
- ポートレート：768x1024
- 横長：1024x1024
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,height=device-height">を使用
- ポートレート：831x1024
- 風景：1520x1024
この質問に対する簡単な答えはありません。 iPhone、iPod Touch、およびiPadで使用されるAppleのWebKitのモバイルバージョンは、ページを画面に合わせてスケーリングします。この時点で、ユーザーは自由にズームインおよびズームアウトできます。
ただし、必要なズームの量を最小限に抑えるようにページを設計できます。最善の策は、幅と高さをiPadの低解像度と同じにすることです。方向がどちらであるかわからないためです。つまり、ページを768x768にして、1024x768であろうと768x1024であろうと、iPadの画面にうまく収まるようにします。
さらに重要なことは、親指でたたきやすいスペースの大きな大きなコントロールを使用してページを設計することです。非常に散らかっていて大量のズームが必要な768x768ページを簡単に設計できます。これを実現するために、コントロールをいくつかのWebページに分割することをお勧めします。
一方、それは最も価値のある追求ではありません。設計中にページを「指に優しい」ものにする機会を見つけたら、それを試してみてください...しかし、現実には、iPadユーザーはページ内を移動したりズームインしたりしてズームアウトすることに非常に満足しています。ほとんどのWebサイトで必要です。どちらかといえば、おそらくこのタイプのナビゲーションに役立つように設計する必要があります。
関連するグループ化されたデータを含むボックスを作成します。このデータは簡単にダブルタップして焦点を合わせ、関連するコントロールを互いに近づけます。 iPadユーザーは、コントロールが少ないページよりも、慣れていない慣れたズームアンドパンナビゲーションを容易にするページを高く評価します。
これを試すことができます：
/*iPad landscape oriented styles */
@media only screen and (device-width:768px)and (orientation:landscape){
.yourstyle{
}
}
/*iPad Portrait oriented styles */
@media only screen and (device-width:768px)and (orientation:portrait){
.yourstyle{
}
}