В настоящее время я работаю над сайтом, и у меня есть одна конкретная проблема с отзывчивостью. Веб-сайт выглядел очень хорошо и соответствующим образом изменил размеры, когда я изменил размер окна браузера с максимального на минимальный. Однако я столкнулся с проблемой на мобильных устройствах, где веб-сайт был обрезан справа и текст заголовка был переполнен. Мне удалось воспроизвести проблему и в браузере, сделав окно как можно меньшим, а затем увеличивая его, пока я не получил горизонтальную полосу прокрутки. Прокрутка вправо, затем выявила проблему.
Я попытался исправить это для мобильных устройств, включив следующий код в мой CSS:
@media(max-width: 700px) {
html,body {
width: 150%;
height: 200%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
}
Это решило проблему переполнения, но теперь после начальной загрузки страница на мобильном телефоне была увеличена, и мне нужно дважды нажать, чтобы сбросить масштаб. Мне не удалось найти решение этой проблемы, чтобы автоматически сбросить масштаб. Сжатие окна браузера на P C с этим кодом отключает веб-сайт с правой стороны при выполнении медиазапроса.
Вот код вместе со способом взглянуть на проблемы. Если вы хотите увидеть исходную проблему, вам нужно всего лишь удалить медиа-запрос в верхней части файла CSS.
https://codepen.io/lapierre-bernard-david/pen/NWqZMqd
I'm Я новичок в веб-разработке, поэтому я уверен, что то, что я придумал, - скорее взлом, чем реальное решение. Я был бы очень рад любому совету.
Поскольку я видел много людей с подобной проблемой, я, конечно же, включал часто рекомендуемый заголовок области просмотра, и у меня нет ни одной фиксированной ширины в моем коде.