[CSS][HTML] Strona nie wyświetla się poprawnie na iPadach Opcje

[Lethys]

Witam,

Tworzę stronę w tak zwanym paralax effect. Generanie strona już sama w sobie śmiga dobrze, ale problem się pojawił kiedy została włączona na iPadzie, gdzie po prostu się nie wyświetla poprawnie.
Nigdy nie optymalizowałem strony pod iPada, także nie bardzo wiem jak to zrobić. Szukałem info w necie, pytałem na stackoverflow ale nadal mam ten sam problem.

Problem polega na tym, że na iPadach nie wyświetlają się kafle z obrazkami, wyświetla się tylko pierwszy. Nawet jeżeli podmienie img src w kolejnych kaflach na ten który się wyświetla to nadal będzie się tylko pierwszy wyświetlał.


Pod iPady i tablety zrobiłem odzielny css:

[PHP] pobierz, plaintext 
<link media="only screen and (device-width: 768px)" href="css/tablet.css" type= "text/css" rel="stylesheet" />
[PHP] pobierz, plaintext 

Tak wyglądają kafle z obrazkami:

[PHP] pobierz, plaintext 
#kafelobrazintro { 
	background: url(../images/introtablet.jpg) 50% 0 no-repeat; 
	height: 1000px;
	margin: 0 auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
	overflow:hidden;
}
 
#kafelobraz1 { 
	background: url(../images/logomzblue.jpg) 50% 0 no-repeat;  
	height: 1000px;
	margin: 0 auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
	overflow:hidden;
}
[PHP] pobierz, plaintext 

Obrazki są w rozdzielczości 1024 x 614, zajmują < 200kb. Zmniejszałem je bo podobno iPad nie czyta img > 2MPX


Co poprawić, żeby wyświetlały się obrazki?

Ten post edytował Lethys 26.01.2014, 16:09:59

[mar1aczi]

Zainstaluj sobie np. do Firefoxa dodatek WebDeveloper. W nim masz "Rozmiar"->"Wyświetl układy responsywne". Dla większości mniejszych pozostaje Ci Poziomy pasek przewijania. Dla RWD możesz użyć np. http://getskeleton.com/ albo innego frameworka CSS.

[Lethys]

Zainstaluj sobie np. do Firefoxa dodatek WebDeveloper. W nim masz "Rozmiar"->"Wyświetl układy responsywne". Dla większości mniejszych pozostaje Ci Poziomy pasek przewijania. Dla RWD możesz użyć np. http://getskeleton.com/ albo innego frameworka CSS.

Ale w dodatkach, czy na stronach do sprawdzenie na innych rozdzielczosciach (np. http://ipadpeek.com/) nie pokazuje tak na prawde jak strona wyglada na iPadach, tylko pokazuje rozdzielczosc na jakiej dziala urzadzenie. iPad zupelnie inaczej wyswietla strone.

Co do frameworku, to troche na to zapozno, bo juz cala strona jest zrobiona, nie wiem jak teraz wrzucic jak w frameworka.

chodzi mi o drobne poprawki, na pewno da sie ro zrobic 2 linijakimi w cssie (IMG:style_emoticons/default/smile.gif)