Блог

У меня возникли некоторые проблемы с моей страницей и заголовком на iPad против рабочего стола.

Когда вы смотрите на http://www.photopile.me на компьютере изображения и верхний / колонтитул должны растягиваться на 100% до края.

Когда вы переходите к нему на iPad, он показывает не всю ширину страницы, а размер заголовка 100% изменяется. Я бы хотел, чтобы ipad отображал всю ширину страницы.

Я только начинаю оптимизацию для iPad, но чего мне не хватает? Я уверен, что есть глупое маленькое правило, которое я упускаю. Вот заголовок HTML

 <header>
    <div id="header-wrapper">
        ... header content ...
    </div>
</header>
<div id="page-content">
        .... photos ....
</div>
  

и CSS

 header {
    background: url('../images/header-bg.jpg') repeat-x top left;
    z-index: 500;
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .9);
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .9);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .9);
    position: fixed;
    top: 0;
    width: 100%;
}
#header-wrapper {
    padding: 10px;
    position: relative;
}
#page-content {
    margin: 0 auto;
    z-index: 400;
    position: relative;
    margin-top: 91px;
    overflow: hidden;
}
  

Надеюсь, этой информации достаточно!

Вы можете просмотреть управление масштабированием с помощью мета-тегов. Недавно у меня возникли некоторые проблемы с этим, когда iPad увеличивал масштаб моей страницы, и я этого не осознавал. (из-за чего я непреднамеренно разработал с неправильным размером)

 <meta name="viewport" content="initial-scale=1">
  

Возможные значения:

• initial-scale
• max-scale
• min-scale
• user-scalable
• width
• height

Вы можете прочитать больше об этом здесь: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

@brenden,

напишите min-width:1024px; вместо min-width:1180px; в #wrapper , потому что это проблема и вашего компьютера. Проверьте себя.