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


117

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

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


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

Ответы:


308

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

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

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

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


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">
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.