Мобильный Safari белый отступ / поле справа

Question

Я проверил другие темы, но не могу понять это.Тестирование этого сайта здесь: http://www.mf.jlscs.com/

В режиме портретной ориентации в Mobile Safari я могу прокрутить вправо до пустого белого отступа.Я не хочу этого

В альбомной ориентации этой прокрутки нет, и она отображается так, как мне бы хотелось.

Я понятия не имею, что вызывает этот таинственный толчок.Я пытался устранить overflow-x, но это не сработало.Если я исключу overflow-x для каждого контейнера, то этот эффект будет разрешен для каждого контейнера на странице.Есть идеи?

Answer 1

Простое добавление границы к некоторым элементам div может привести к изменению макета. Добавьте это в конец вашей CSS, чтобы найти элемент мошенника:

* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

Я также сделал букмарклет, который делает это через javascript, чтобы его можно было легко использовать на любом сайте. http://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

Answer 2

Скорее всего, это вызвано тем, что один из ваших структурных элементов превышает ширину вашего тела.Ищите код, похожий на width: 100%; padding 20px; или что-то такое, что заставит его выстрелить.

Я предлагаю поставить красную рамку на всех основных элементах div и посмотреть, кто является виновником и простирается до края.

Answer 3

Действительно, эта проблема возникает из-за "мошеннических" элементов, которые почему-то выходят за пределы ширины документа.

Один из способов - использовать CSS, описанный выше, еще не пробовал, но я не уверен, насколько легко было бы обнаружить элементы с помощью границ.

Другой подход - запустить этот код JS в консоли, чтобы найти их:

Array.prototype.filter.call(document.querySelectorAll('*'), function (node) { return node.clientWidth + node.offsetLeft > document.documentElement.clientWidth });

Это вернет массив всех элементов, ширина / смещение которых (расстояние слева) больше, чем clientWidth.

Затем вам нужно будет проверить элементы и выяснить, почему они ведут себя так - в моем случае нижний колонтитул имел значения width:100% и padding:10px, в результате чего его ширина была на 20 пикселей больше ширины документа.

Интересно, что это было видно только на iPhone, а не на Android.

Answer 4

Я бы предложил загрузить Web Developer для Firefox и просто включить Outline> Элементы уровня Outline Block.