超大div顯示在iPad錯誤

Question

我有一個div是4000像素寬和高，它不想在iPad上正確顯示。這是它應該是怎樣的樣子，顯示在Safari瀏覽器（請忽略了可怕的梯度，它是粗糙的字母！）：

http://i.stack.imgur.com/UmAjD.png

看看它是如何加載（有點）方形的窗口？尼斯。這是同一個網站的截圖，從違規的iPad：

http://i.stack.imgur.com/nIIZo.png

哎喲。雖然第一個約1500像素被切斷，剩下的東西出現並要求被看到。很討厭！我對手機開發很陌生，並且很想知道我在這裏錯過了什麼。這是該div的CSS：

.grad{ 
overflow:auto; 
position:absolute; 
top:-1665px; 
left:-1448px; 
height:4000px; 
width:4000px; 
background-color: #1a82f7; 

background-color: #2F2727; 
background-image: url(images/radial_bg.png); 
background-position: center center; 
background-repeat: no-repeat; 
background: -moz-radial-gradient(circle, #1a82f7, #2F2727); 
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727)); 
background: -webkit-radial-gradient(circle, #1a82f7, #2F2727); 

-moz-border-radius:2000px 2000px 2000px 2000px; 
-webkit-border-radius:2000px 2000px 2000px 2000px; 
border-radius:2000px 2000px 2000px 2000px; 

此外，正文設置爲溢出：自動。任何幫助將不勝感激！提前謝謝了！

Answer 1

我不確定這是否能解決問題，但這是我接下來要做的。

把這個在你的HTML的頭部分：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.8, maximum-scale=2.0" />

如果導致覆蓋在視口中的背景，但您發現該內容則太小了，你可以嘗試將其更改爲東西像：

<meta name="viewport" content="width=1280, initial-scale=1.0, minimum-scale=0.8, maximum-scale=2.0" />