Как избавиться от полоски справа при верстке HTML под iPad?

Question

[memmori]

Здравствуйте. Проблема в следующем. При верстке фоновых изображений через DIV с шириной 100% на мобильных устройствах появляется полоска справа как на скриншоте. Ситуация была еще хуже, помогла парочка костылей:

<meta name="viewport" content="width=1000" />

Но после какой-то манипуляции ситуация повторилась... Исходники можно глянуть на ТЫК

Как наконец-то решить эту проблему?



UPD: решение в комментариях.

Answer 1

[Иван]

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

Comments

[memmori]

https://pp.vk.me/c618631/v618631031/13b0d/I-rpk3y8... как и предудущий вариант, только масштаб стал 1.0

[Иван]

@memmori по-хорошему нужно переверстать все стили под viewport, который я написал :)
Пофиксите ссылку на исходники в вопросе.

[memmori]

@0neS не заметил, спасибо. Сейчас прописал и проблема решилась. Но не могу понять почему? У меня контентная часть сайта 1000 пикселей... Откуда взялись эти 20 пикселей? Есть ли какое-либо научное объяснение этому?

[Иван]

@memmori

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html, body {
 width: 100%;
}

[Иван]

@memmori habrahabr.ru/post/149441

[Иван]

@memmori четсно говоря, вы вообще как-то странно верстаете. Для чего у блоков 1го уровня clear: both?

[Евгений Петров]

@memmori вот 2 части рассказа про viewport и почему их несколько
www.quirksmode.org/mobile/viewports.html
www.quirksmode.org/mobile/viewports2.html

[memmori]

@0neS я только учусь и это тестовое задание. clear: both много где расставлено, особенно у h1, h2, h3, уберу, спасибо. По поводу border-box я знал, но я не выходил, вроде за пределы 1000 пикселей нигде... Если и был где-то margin и padding, то он вписывался в нужное количество пикселей.

А что еще странного?

[Евгений Петров]

@memmori
— инлайн-стили
— обнуление всего и вся
— шрифт, описанный не в руте
— стили, основанные на тэгах
— отсутствие поддержки IE9

[memmori]

@Petroveg опробовал решение и полностью слетела верстка. Буду переверстывать.

- инлайн-стили я перенесу в CSS, косяк знаю
- а чем плохо обнуление стилей? Читал на хабре про обнуление habrahabr.ru/post/45296/, это - самый древний и короткий способ... К тому же, можно избавиться от рамочек вокруг body.
- что значит "шрифт, описанный не в руте"? имеется ввиду, что font-style нужно применить к html, а не body?
- поддержка для IE - это включить работу placeholder и поработать с кнопкой button? (запустил IE в режиме совместимости)

[Евгений Петров]

@memmori
Когда-то таблицами верстали. Чуть позже всякие reset.css применяли. Могу подкинуть ссылок на старые приёмы. Надо?)
Да, шрифт в руте нужен. Хотя бы из-за rem.
Про поддержку IE — тут тесты нужны. Просто точно по стилям вижу, что в IE9 будут косяки. Про IE8 молчу — в принципе его выдавливать нужно)) Собственно как и IE9, но тут пока успех на стороне противника.

[memmori]

Спасибо за разъяснения! Спросить некого, а в гугле все по разному пишут...

Тогда последний вопрос про обнуление - нужно ли оно? Что сейчас используют?
Или правильнее применять его только к необходимым элементам?
То есть, допустим, если по макету мне нужно чтобы между h1 и h2, которые идут друг за другом, был "margin:0;" и рамка не было рамки у body то правильнее это указывать в самих свойствах тегов или обнулить всю страницу, чтобы было легче?

[Иван]

@memmori используйте meyerweb.com/eric/tools/css/reset или https://github.com/necolas/normalize.css/blob/mast...
margin: 0 имхо лучше обнулить, а нужным элементам задавать отличное от нуля значение

[memmori]

@0neS @Petroveg я, извиняюсь, понимаю, что надоел, но никак эту полосу справа не могу победить... https://pp.vk.me/c618631/v618631031/13c6a/pr6JftJw...

В хэде прописано -

В HTML

В CSS

#wrapper {
width: 1000px;
margin: 0 auto;
padding: 10px;
}
#top_backgound {
height: 798px;
background: url(img/bg1.jpg);
background-position: top center;
}

Как это победить эту ошибку?

[Иван]

@memmori если у #wrapper padding убрать, полоса остается?

[memmori]

@0neS да, остается.