Адаптивный веб-дизайн работает на настольных компьютерах, но не на мобильных устройствах.

117

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

Что могло быть не так?

mobile web responsive-design Тадас Дэвидсонас
источник
1
Вам нужно будет добавить больше информации и кода, чтобы кто-нибудь был полезным. Ваш CSS, HTML и т. Д. Какой фреймворк (например, Twitter Bootstrap) вы используете, если он есть, и т. Д.
ajacian81

Ответы:

308

Вероятно, вам не хватает метатега области просмотра в заголовке html:

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

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

Больше информации здесь .

Agush
источник
2
Он может работать в браузере без этой строки, но на мобильном телефоне ему просто нужна эта строка.
Тадас Дэвидсонас
3
Я просто люблю тебя
Димитрис
Я тоже тебя люблю @ ΔημήτρηςΦιλίππου
Агуш
Еще слова любви к вам
btlm
3
убедитесь, что производство index.htmlдействительно включает тег, а также разработкуindex.html
halafi
6

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

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

Сайфул Ислам
источник
2

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

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

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

<meta name="viewport" content="width=device-width, initial-scale=1" />
Шадаб Ахмед
источник
-1

Адаптивный метатег

Чтобы обеспечить надлежащий рендеринг и масштабирование касанием для всех устройств, добавьте метатег адаптивного окна просмотра к вашему <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Марсело Австрия
источник