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{ 

     } 
    }