Отзывчивый - все элементы слишком малы на мобильных устройствах

Question

Знаю, я работаю над сайтом, но у меня странная проблема с просмотром на мобильных устройствах. Когда я изменяю размер окна в настольном браузере, элементы и шрифты меняются вместе с окном просмотра, как они должны. Когда я открываю веб-сайт на мобильном устройстве, все шрифты и элементы (например, меню бургера) становятся очень маленькими. Похоже, это проблема масштабирования или что-то подобное. У меня есть мета-тег viewport в голове, так что это не проблема.

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

Окно полного экрана
Окно с измененным размером
Отзывчивый пример 1
Resposive пример 2

Answer 1

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

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

Это означает, что браузер будет (вероятно) отображать ширина страницы по ширине собственного экрана. Поэтому, если этот экран имеет ширину 320 пикселей, окно браузера будет иметь ширину 320 пикселей, а не уменьшенное изображение и не будет отображать 960 пикселей (или все, что это устройство делает по умолчанию вместо адаптивного мета-тега).

Дальнейшее чтение Здесь