Чуйний веб-дизайн працює на робочому столі, але не на мобільному пристрої

117

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

Що може бути неправильним?

mobile web responsive-design

— Тадас Давідсонас
джерело

1

Вам доведеться додати більше інформації та коду, щоб хтось був корисним. Ваш CSS, HTML і т. Д. Який фреймворк (наприклад, Twitter Bootstrap) ви використовуєте, якщо такий є і т.д.

— ajacian81

307

Напевно, ви не вистачаєте мета-тегу viewport у голові html:

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

Без цього пристрій передбачає і встановлює вікно перегляду в повний розмір.

Більше інформації тут .

— Агуш
джерело

2

Він може працювати в браузері без цієї лінії, але на мобільному він просто потребує цієї лінії.

— Тадас Давідсонас

3

Я просто тебе люблю

— Димитріс Філіппу

Я теж тебе люблю @

— ΔημήτρηΦΦιλίππου

Ще одне слово кохання до вас

— btlm

3

переконайтеся, що виробництво index.htmlнасправді включає тег, а також розробкуindex.html

— халафі

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

— Марсело Австрія
джерело