Sunday 4.12.2011 16:12:48, Jakuje
Když jsem s vývojem začínal, existoval pouze jeden telefon, Palm Pre, s jednou velikostí displeje, 320x480 px. Vytvořit pozadí pro takovou aplikaci bylo jednoduché. Stačilo použít obrázek o této velikosti a umístit jej na pozadí:
background-image: url('../images/background_tea.png');
}
Problém nastal, jakmile se objevil Palm Pixi s menším displayem a nedávno, když přišel HP Pre 3 s větší výškou displaye. Stejně tak zobrazovaná velikost na jednom telefonu nebyla vždy stejná (v dolní části se zobrazují bannery, notifikace, nebo alarmy). I na velkém display se můře aplikace zmenšit.
Jediné řešení, které vyřešilo všechny tyto problémy bylo sledovat v javascriptu proměnnou this.controller.window a při její změně přepočítat pozici pozadí (a znovu vertikálně zarovnat ovládací prvky). Stejnou funkci volám po prvním načtení scény.
A tato funkce:
IMAGE_SIZE = 540;
tt = document.getElementsByClassName("tret");
for(i = 0; i < tt.length; i++){
// set element height to 1/3 of window height (without 100 pixels of commands up and down)
tt[i].style.height = (this.controller.window.innerHeight - 100)/3 + "px";
}
// move background to the middle of screen
document.getElementsByClassName("palm-default")[0].style.backgroundPositionY =
"-" + (IMAGE_SIZE - this.controller.window.innerHeight)/2 + "px";
}