[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