Отзывчивый веб-дизайн работает на рабочем столе, но не на мобильном устройстве

У меня есть веб-сайт, который должен реагировать на мобильные телефоны. Я создал его с помощью своего рабочего стола. Когда я настраиваю окна браузера, он отлично работает для мобильного телефона, но когда я проверяю его на своем реальном мобильном телефоне: Samsung Galaxy S2 не реагирует на мобильный вид.

Что может быть неправильным?

Ответы

Ответ 1

Вероятно, вам не хватает метатега viewport в заголовке html:

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

Без него устройство принимает и устанавливает видимость в полный размер.

Подробнее здесь.

Ответ 2

Я также столкнулся с этой проблемой. Наконец, я получил решение. Используйте этот ниже код. Надежда: проблема будет решена.

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

Ответ 3

Проверьте свой CSS или используйте CSS Validator.

    Parse Error

   .navbar .nav li a {
    padding-right: 5px;
    paddng-left: 5px;

Похоже, что вы не закрыли фигурные скобки или опечатку.

Ответ 4

Добавление этого для людей, которые ищут эту ошибку, для которой принятый ответ не работает. Я считаю, что это будет более редкий, но, тем не менее, разочаровывающий случай:

Если ваша страница выполняет рендеринг внутри набора фреймов (например, клонирование домена), то мета-теги не помогут. Вам нужно будет поместить их на страницу в клоакинг-домен, к которому у вас может быть или нет доступ, в зависимости от вашего хоста DNS.

Ответ 5

Хотя ответили выше и это правильно использовать

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

но если вы используете React и веб-пакет, не забудьте закрыть тег elemnent

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