неправильный показ div в ipad неправильно

Question

У меня есть div с шириной 4000 пикселей и высотой, и он не хочет правильно отображаться на iPad. Вот как это должно выглядеть, как показано в Safari (не обращайте внимания на отвратительный градиент; он в грубой альфе!):

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

Видите, как он загружается (несколько) прямо в окне? Ницца. Это скриншот того же сайта, с обиделого iPad:

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

Уч. В то время как первые ~ 1500 пикселей обрезаются, остается то, что осталось и требует внимания. Довольно неприятный! Я новичок в разработке мобильных устройств, и мне очень хотелось бы знать, какого черта я здесь пропускаю. Это CSS для div:

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