css - 超大div在ipad中显示错误

Question

我有一个宽度和高度均为 4000 像素的 div，它不想在 iPad 上正常显示。这就是它在 Safari 中显示的样子(请忽略丑陋的渐变；它处于粗略的 alpha 状态!):

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;

此外，正文设置为 overflow:auto。任何帮助将不胜感激!非常感谢!

Answer 1

我不确定这是否能解决问题，但这是我下一步要尝试的。

把它放在你的 html 的 head 部分:

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

如果这导致背景覆盖视口(viewport)，但您发现内容太小，您可以尝试将其更改为:

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