iPad的浏览器的宽度和高度标准

Question

在iPad上观看任何网页时

有谁知道对身体最安全的宽度和高度？我想尽可能避免滚动条。

谢谢。

埃里克

Answer 1

像素宽度和你的页面的高度将取决于取向以及元视口代码，如果指定。以下是在iPad 1浏览器上运行jquery的$（window）.width（）和$（window）.height（）的结果。

当页面有没有元视口代码：

• 肖像：980x1208
• 景观：980x661

当页面有这两种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">

• 肖像：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">：

• 肖像：768×1024
• 景观：768×1024

随着<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width,height=device-height">

• 肖像：768×1024
• 景观：1024×1024

随着<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,height=device-height">

• 肖像：831x1024
• 景观：1520x1024

Answer 2

有没有简单的回答这个问题。用于iPhone，iPod Touch和iPad的Apple的移动版WebKit将缩放页面以适应屏幕，此时用户可以自由放大和缩小。

这就是说，你可以设计自己的网页，以尽量减少缩放必要的量。你最好的选择是使宽度和高度与iPad的较低分辨率相同，因为你不知道它面向哪个方向;换句话说，你可以制作你的页面768x768，这样它就可以很好地适应iPad的屏幕，不管它是面向1024x768还是768x1024。

更重要的是，您希望设计带有大量控件的大控件页面，这些控件很容易用拇指击中 - 您可以轻松设计一个非常混乱，因此需要大量缩放的768x768页面。要做到这一点，您可能希望将您的控件划分为多个网页。

在另一方面，这不是最值得追求。如果在设计你发现机会，使你的页面更加“手指友好的”，然后去了......但现实情况是，iPad用户非常舒适的移动和放大和缩小页面去的事情，因为这在大多数网站上都是必需的。如果有的话，你可能想要设计它，这有利于这种类型的导航。

请有关分组数据的箱子，可以很容易地双点的重点，并保持相互靠近相关的控件。 iPad用户很可能会喜欢这样一个页面，该页面有助于他们熟悉的熟悉的缩放和平移导航，而不仅仅是控制较少的页面，因此他们不必这样做。

Answer 3

你可以试试这个：

/*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{ 

     } 
    }