Responsywny design - zapytanie o media nie działa na iPhonie?

Staram się stworzyć wersję strony dostosowaną do urządzeń mobilnych, aby moja witryna była odpowiednio dostosowana do mniejszego rozmiaru ekranu i skali.Responsywny design - zapytanie o media nie działa na iPhonie?

Utworzono kilka zapytań o media, które zachowują się poprawnie w przeglądarce podczas zmiany rozmiaru na pulpicie.

Na moim iPhonie safari po prostu zmniejsza całą witrynę, ale zachowuje proporcje pełnowymiarowej witryny. Jak uzyskać obserwację zapytania o media? czy coś przeoczyłem?

Tu jest link do piaskownicy, które próbuję dostać działa poprawnie - każda pomoc lub sugestie są mile widziane:

http://www.preview.brencecoghill.com/

Źródło

2012-10-21 Gearu

Czy masz meta na widok portu w HTML?

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

Więcej informacji tutaj: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

Źródło

2012-10-22 00:09:42 coopersita

bardzo dziękuję za odpowiedź .. ta odpowiedź bardzo mi pomaga .. ale mała korekta moja koleżanka coopersita .. brakuje ci "zamknięcia" na twoim taga;) –

Naprawiono to dzięki. – coopersita

Podjęłam próbę aby edytować tę odpowiedź, aby naprawić niepoprawną składnię, ale została odrzucona. Powinna być (prawie jak odpowiedź user1506194): '' – penfold

myślę znajdziesz ostrzeżenie w Chrome z; zamiast, ten powinien działać dobrze:

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

Źródło

2013-08-21 13:07:21

Edytowałem zaakceptowaną odpowiedź, ponieważ ta składnia jest poprawna. – penfold

Właśnie doświadczyłem najdziwniejszych rzeczy po rozwiązywania tego samego problemu na jeden dzień. Coś do wypróbowania, jeśli wszystko inne zawiedzie ...

Moje strony były idealnie czułe na moim laptopie podczas programowania, ale nie na moim iPhonie, iPadzie ani Samsungu. I wreszcie odkrył miałem umieścić linię komentarz po oświadczeniu DOCTYPE i przed html lang oświadczeniu tak:

<!DOCTYPE html> 
<!-- This comment line needed for bootstrap to work on mobile devices --> 
<html lang="en">

Wreszcie moje strony były czułe na urządzeniach mobilnych. Dziwne!

Źródło

2018-03-03 23:16:34 Filemangler

Responsywny design - zapytanie o media nie działa na iPhonie?

Odpowiedz

Powiązane problemy