Отзывчивый navbar работает на компьютере, но не на телефоне - PullRequest
0 голосов
/ 22 апреля 2020

Итак, мой клиент нашел этот симпатичный отзывчивый navbar на codepen и хочет использовать его на своем сайте. Я решил сделать тест, загрузив его и поместив его на тестовую страницу в своем домене.

Прежде чем забегать вперед, я скачал файл и проверил его на своем собственном домене и некоторые проблемы подошел. Он отлично работал на компьютере. Когда окно было растянуто на весь экран, оно было настроено на горизонтальное меню, а когда я уменьшил экран, оно стало выпадающим меню. Однако при просмотре на реальном телефоне меню все равно отображалось как горизонтальное меню. enter image description here

Я безуспешно пытался связываться с документом CSS. Я даже пытался изменить @media (max-width: 768px), думая, что может потребоваться большее число. Я не могу найти в коде Javascript ничего, что могло бы быть неправильным. Кто-нибудь из вас знает, почему это может не сработать.

Любая помощь будет оценена.

Спасибо, Итан

1 Ответ

1 голос
/ 22 апреля 2020

Это звучит как проблема области просмотра. На странице <head> вашей страницы HTML попробуйте добавить следующий код:

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

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

...