2013-07-08 13 views
6

Witryna Wordpress (wykorzystująca framework Genesis) Zaprojektowałem ją tak, aby poprawnie wyświetlać ekrany na telefonie iPhone i telefonie HTC, ale nie na telefonach Samsung Galaxy. (testowane na Samsung Galaxy S2 i Samsung Ace) Obecnie korzystam z wtyczki FitVids, aby uczynić wideo osadzonymi responsywnymi.Witryna nie odpowiada na Samsung Galaxy S2

Co dziwne, strony bez osadzonych filmów wyświetlane na telefonach Samsung wyświetlają się prawidłowo, ale na stronie z osadzonymi wideo układ strony jest wyświetlany na ekranie tabletu, a nie na ekranie telefonu.

Próbowałem różnych innych wtyczek, ale żaden z nich nie wydaje się rozwiązać ten problem.

Byłoby wspaniale, gdyby ktoś mógł udzielić porady na ten temat.

Oto mój site

Oto CSS stylesheet

+0

Używasz 'jquery.fitvids.js' wersji' 1.0' od 2011 roku - może powinieneś sprawdzić dostępność aktualizacji. – birgire

+1

proszę znaleźć mój post, i spróbuj, umieszczając w mediach css –

+0

Chciałbym zobaczyć dobrą odpowiedź na to; żadna z podanych odpowiedzi nie wyjaśnia, dlaczego strona z osadzonymi filmami działa inaczej niż bez. –

Odpowiedz

2

Spróbuj użyć tego

<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"> 
3

Jak już stwierdziliśmy, że ekran Samsung 480 * 800px

Spróbuj z poniżej CSS:

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 800px) 
and (orientation : landscape) { 

} 

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 800px) 
and (orientation : portrait) { 

} 

Dzięki

1

Nie zaleca się używania reguł @media, ponieważ rozmiar pikseli na urządzeniu mobilnym a na komputerze może się różnić.

Na przykład, zamiast:

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 800px) 
and (orientation : landscape) { 

} 

@media only screen 
and (min-device-width : 480px) 
and (max-device-width : 800px) 
and (orientation : portrait) { 

} 

Dodaj pojemnik, który będzie miał margin-left 5% i margin-right 5%:

<body> 
<div class="container"> 
# Your body goes here 
</div> 
</body> 

Znalazłem to na znacznie bardziej przyjazne dla użytkownika i utrzymane podejście do responsywnego projektowania niż standardowa reguła @media.

Powiązane problemy