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的主题部分：

<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" />

超大的div在ipad中显示错误

1 个答案: