Веб-сайт отображает пустое пространство в правой части экрана iPhone

У меня возникла проблема на http://eiglaw.com: на в правой части экрана iPhone. Я исследовал проблему в stackoverflow, и эти сообщения актуальны, но когда я попробовал различные предлагаемые решения, я не смог решить проблему:

Адаптивный веб-сайт на iPhone — нежелательное пустое пространство при повороте из альбомной в портретную

Фон тела веб-сайта, отображающий правое белое поле в iPhone Сафари

Пробел справа от заголовка при масштабировании

У меня была аналогичная проблема на iPad, но я смог исправить ее с помощью этого медиа-запроса:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
/*and (orientation : landscape)*/ {
html,
body {
width:1000px; 
}
}

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

Большое спасибо!


ios iphone html css removing-whitespace
person Greg    schedule 22.09.2013    source источник

Ответы (4)


arrow_upward
5
arrow_downward

Проблема в вашем <h3 class="menu-toggle">Menu</h3> (почему h3, кстати?), который кажется шире, чем область просмотра из-за наличия width: 100% + некоторого отступа.

Попробуйте установить box-sizing: border-box; для этого элемента.

person Tigran Petrossian    schedule 22.09.2013
comment
Это полностью сработало! Таким образом, урок, который можно извлечь из этого, заключается в том, что любой элемент, имеющий ширину 100%, не должен иметь левого или правого заполнения. Если это так, iOS добавит это и отобразит пустую область справа, равную этому дополнительному отступу. - person Greg; 23.09.2013
comment
Это не касается iOS, проблема воспроизводится и в других браузерах. Всякий раз, когда вы используете width: 100% с отступом, вы должны установить box-sizing: border-box;, чтобы избежать перекрытия. - person Tigran Petrossian; 23.09.2013
comment
Я только что решил ту же проблему здесь с этим... Проблема заключалась в том, что один из моих заголовков был больше 100%... Спасибо :) - person user754730; 11.08.2014

arrow_upward
1
arrow_downward

Это угостило Тиграна.

Я только что добавил глобальный класс вверху моей таблицы стилей:

div {
  box-sizing: border-box;
  }

Ваше здоровье!

person Joff    schedule 28.08.2015

arrow_upward
0
arrow_downward

Используйте следующие стили:

body{
  overflow-x: hidden !important;
}

это удалит переполнение с обеих сторон экрана, т.е. дополнительное пустое пространство на экране.

person DINESH MANIKANTHA    schedule 14.06.2020
comment
Хотя этот код может решить проблему, включая объяснение того, как и почему это решает проблему, действительно поможет улучшить качество вашего сообщение и, вероятно, приведет к большему количеству голосов. Помните, что вы отвечаете на вопрос для будущих читателей, а не только для того, кто задает сейчас. Пожалуйста, отредактируйте свой ответ, чтобы добавить пояснения и указать, какие ограничения и предположения применяются. - person Богдан Опир; 14.06.2020

arrow_upward
-6
arrow_downward

Попробуй это

iPhone 5 — Пейзаж

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) { }

iPhone 5 — Портрет

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) { }

Ай фон 4

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { }
person mdesdev    schedule 22.09.2013
comment
Не знаю, потому что я сказал Попробуйте это. - person mdesdev; 22.09.2013