回答:
ページのピクセルの幅と高さは、指定されている場合、方向とメタビューポートタグに依存します。iPad 1ブラウザーでjqueryの$（window）.width（）と$（window）.height（）を実行した結果は次のとおりです。
ページにメタビューポートタグがない場合：
ページに次の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">
と<meta name="viewport" content="width=device-width">：
と<meta name="viewport" content="height=device-height">：
と<meta name="viewport" content="height=device-height,width=device-width">：
と <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">
と <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,height=device-height">
この質問に対する簡単な答えはありません。AppleのモバイルバージョンのWebKitは、iPhone、iPod Touch、iPadで使用され、画面に合わせてページを拡大縮小します。この時点で、ユーザーは自由にズームインおよびズームアウトできます。
つまり、必要なズームの量を最小限に抑えるようにページを設計できます。方向と方向がわからないため、幅と高さを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{
}
}