Как сделать так, чтобы мой веб-сайт отображал горизонтальную полосу прокрутки, когда она свернута?

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

  • Все (изображения, текст и т.д.) сжимается, чтобы соответствовать меньшему размеру экрана.
  • Некоторые элементы исчезают, в то время как другие накладываются. (Например, когда есть строка с двумя столбцами ‘col-md-6’ из bootstrap, она выглядит все нормально при нормальном размере, но когда свернута, один из столбцов становится огромным, а другой столбец захватывает существование.
  • < br > s в тексте искажают поток абзацев.

Я пробовал:

overflow-x: auto;
overflow-y: hidden;

как стиль для body, html и div (отдельно, не сразу)
но это просто отключает вертикальную прокрутку и элементы дальше вниз не видны. И даже тогда, автоматическое переполнение-X thingy не решает его

Я также пытался:

min-width: 800px;

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

1 ответ

  1. Сайт будет пытаться настроить на мобильный видовой экран, вы можете предотвратить это, добавив:

    <head>
        <title>My Website</title>
        <meta name="viewport" content="user-scalable = no">
    </head>
    

    Или попробуйте

    <head>
        <title>My Website</title>
        <meta name="viewport" content="initial-scale=1">
    </head>
    

    Проблема, вероятно, с тегом viewport.

    Вы также должны установить фиксированную ширину на теле.