Elastyczne projektowanie witryn działa na komputerze, ale nie na urządzeniu mobilnym

117

Mam witrynę internetową, która musi być responsywna dla telefonów komórkowych. Stworzyłem go na moim pulpicie. Kiedy dostosowuję okna przeglądarki, działa idealnie na telefon komórkowy, ale kiedy sprawdzam to na moim prawdziwym telefonie komórkowym: Samsung Galaxy S2 nie reaguje na widok mobilny.

Co może być nie tak?

mobile web responsive-design

— Tadas Davidsonas
źródło

1

Będziesz musiał dodać więcej informacji i kodu, aby każdy mógł być pomocny. Twój CSS, HTML itp. Jakiego frameworka (takiego jak Twitter Bootstrap) używasz, jeśli w ogóle, itp.

— ajacian81

308

Prawdopodobnie brakuje tagu meta viewport w nagłówku HTML:

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

Bez tego urządzenie przyjmuje i ustawia widok na pełny rozmiar.

Więcej informacji tutaj .

— Agusz
źródło

2

Może działać w przeglądarce bez tej linii, ale na urządzeniach mobilnych potrzebuje tylko tej linii.

— Tadas Davidsonas

3

Po prostu cię kocham

— Dimitris Filippou

Też cię kocham @ ΔημήτρηςΦιλίππου

— Agush

Kolejne słowa miłości do Ciebie

— btlm

3

upewnij się, że produkcja index.htmlfaktycznie zawiera tag, a także rozwójindex.html

— halafi

6

Ja też stanąłem przed tym problemem. Wreszcie znalazłem rozwiązanie. Użyj poniższego kodu. Nadzieja: problem zostanie rozwiązany.

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

— Saiful Islam
źródło

2

Chociaż odpowiedź na to pytanie znajduje się powyżej i jest słuszna

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

ale jeśli używasz Reacta i webpacka, nie zapomnij zamknąć tagu elementu

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

— Shadab Ahmed
źródło

-1

Responsywny metatag

Aby zapewnić prawidłowe renderowanie i powiększanie dotykowe na wszystkich urządzeniach, dodaj responsywny metatag widocznego obszaru do swojego <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

— Marcelo Austria
źródło