У меня есть веб-сайт, который должен реагировать на мобильные телефоны. Я создал его с помощью своего рабочего стола. Когда я настраиваю окна браузера, он отлично работает для мобильного телефона, но когда я проверяю его на своем реальном мобильном телефоне: Samsung Galaxy S2 не реагирует на мобильный вид.
Что может быть неправильным?
Вероятно, вам не хватает метатега viewport в заголовке html:
<meta name="viewport" content="width=device-width, initial-scale=1">
Без него устройство принимает и устанавливает видимость в полный размер.
Подробнее здесь.
Я также столкнулся с этой проблемой. Наконец, я получил решение. Используйте этот ниже код. Надежда: проблема будет решена.
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Проверьте свой CSS или используйте CSS Validator.
Parse Error
.navbar .nav li a {
padding-right: 5px;
paddng-left: 5px;
Похоже, что вы не закрыли фигурные скобки или опечатку.
Добавление этого для людей, которые ищут эту ошибку, для которой принятый ответ не работает. Я считаю, что это будет более редкий, но, тем не менее, разочаровывающий случай:
Если ваша страница выполняет рендеринг внутри набора фреймов (например, клонирование домена), то мета-теги не помогут. Вам нужно будет поместить их на страницу в клоакинг-домен, к которому у вас может быть или нет доступ, в зависимости от вашего хоста DNS.
Хотя ответили выше и это правильно использовать
<meta name="viewport" content="width=device-width, initial-scale=1">
но если вы используете React и веб-пакет, не забудьте закрыть тег elemnent
<meta name="viewport" content="width=device-width, initial-scale=1" />