Ответ 1

это сводило меня с ума, и я просто решил его, добавив position:fixed к телу

Ответ 2

Почему body не полная ширина, хотя он установлен на 100%/vw?

Как ни странно, он имеет полную ширину, но область просмотра автоматически уменьшается браузером, поэтому он умещается в переполненном контенте.

Чтобы проверить, если это так, введите это в консоли (1): window.visualViewport.scale

1) редактировать, сентябрь 2019 г.: visualViewport: доступно только в Chrome - просим позднего уведомления

Если он возвращает что-то вроде 0,8, размер тела правильный, но область просмотра уменьшена.

Вы также можете дважды нажать, чтобы переключиться между масштабом 1 и "fit-content-scale" (требуется имитация касания, как в chrome dev-tools).

Как не переполнить body?

• Смотрите здесь fooobar.com/questions/27841/... "Создание div-оболочки для сайта внутри тела"
• или проверьте, если у определенного элемента есть min-width, который "переопределяет" его width
• или проверить, если что-то вращается, или поля fooobar.com/questions/1589070/...

Ответ 3

Это может быть из-за очень длинного слова на вашей веб-странице. После использования правильного метатега области просмотра:

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

Я попробовал это, поместив этот текст внутри элемента абзаца, внутри какого-то пустого HTML-документа:

<p>Here I have a text, and I am going to use a very long, and not-imaginary word (oh it real) inside. Without some word-breaking CSS, the result will break the screen on smaller devices: Pseudopseudohypoparathyroidism</p>

Ответ 4

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

После эксперимента я узнал, что это вызвано элементом внутри моей страницы, который был повернут, и его высота стала препятствием для мобильных устройств, поскольку она была ближе к правому концу тела.

Итак, я хотел бы добавить этот ответ, если кто-то, как и я, найдет этот вопрос через google:

Эта проблема может быть вызвана многими факторами, вам может потребоваться выяснить, не является ли одна из ваших компонентной ширины проблемой для мобильного просмотра. Вероятно, на вашей странице слишком длинный div, или вращающийся, который выходит из тела.

Ответ 5

В моем случае элемент body (и html) возвращается к нормальному состоянию после удаления свойств из группы display: flex;. После моего расследования я обнаружил, что каждый элемент с автоматически вычисляемой шириной должен находиться в элементе с высотой и шириной и обертывать всех детей, идущих полностью к телу. После добавления некоторого overflow:auto; position:relative; к родительским элементам тело будет правильно масштабироваться с отображением flex, вложенным в отображение flex.

@import '../../variables.scss';
:host {
  overflow: auto; // added this line
}

.top-bar {
    display: flex;
    flex-direction: row;
    padding: 10px;
    box-shadow: $shadow;
    position: relative;
    .search-item {
        flex: 1;
        margin: 0 1em;
        display: flex;
        flex-direction: row;
        position: relative;
        input {
            margin: 0;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            border-right-width: 0px;
            flex: 1;
            width: 1px;
        }
        button {
            margin: 0;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
            border: 1px solid #ccc;
            border-left-width: 0px;
            box-shadow: inset $shadow;
        }
    }
    button.icon-only {
        border: none;
        background-color: transparent;
    }
}

меню выглядит следующим образом:

перед:

после

Ответ 6

Просто добавьте это в тег body, и ваша проблема должна быть решена:

body {
  position: absolute;
 }

Ответ 7

У меня такая же проблема. В моем случае был элемент grid котором было много столбцов, а grid-gap 50px. Это привело к расширению html. Я думаю, что хорошей практикой является уменьшение grid-column-gap на маленьких экранах.

Ответ 8

Я сталкивался с этой проблемой несколько раз, особенно на iPhone.

Я нашел простое решение, обратившись ко всем элементам с помощью селектора *.

В моем CSS я установил max-width в медиа-запросе на max-width, где я начинаю сталкиваться с проблемой, например:

    @media only screen and (max-width: 350px) {
      * {
        overflow: hidden;
      }
    }