Answers:
页面的像素宽度和高度将取决于方向以及元视口标记（如果指定）。以下是在iPad 1浏览器上运行jquery的$（window）.width（）和$（window）.height（）的结果。
当页面没有元视口标签时：
当页面具有以下两个meta标签之一时：
<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">
这个问题没有简单的答案。iPhone，iPod Touch和iPad中使用的Apple的WebKit移动版本将缩放页面以适合屏幕，此时用户可以自由放大和缩小。
也就是说，您可以设计页面以最小化所需的缩放量。最好的选择是使宽度和高度与iPad的较低分辨率相同，因为您不知道iPad的方向。换句话说，您可以将页面设置为768x768，这样无论页面的方向是1024x768还是768x1024，它都将非常适合iPad屏幕。
更重要的是，您要设计带有大型控件的页面，并带有很多易于用拇指触及的空间-您可以轻松设计出非常混乱的768x768页面，因此需要进行大量缩放。为此，您可能需要将控件划分为多个网页。
另一方面，这不是最值得的追求。如果在设计时发现了使页面更加“手指友好”的机会，那就去做……但是现实是，iPad用户非常乐于四处移动和放大和缩小页面以进行操作，因为在大多数网站上这是必需的。如果有的话，您可能希望对其进行设计，以使其有利于这种导航。
制作带有相关分组数据的框，可以轻松地双击该框以进行关注，并使相关控件彼此靠近。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{
}
}