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

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">

— Марсело Австрия
источник