Nedávno jsem řešil problém, jak měnit velikost stránky jako celku, tj včetně nadpisů, textů, v závislosti na velikosti výšky okna. Efekt tedy podobný některým flashovým aplikacím.
Jistě by se našlo sofistikovanější řešení. Třeba script, který projde všechny elementy a změní jejich velikost, ale ani to by zřejmě nefungovalo 100 %. Já se zaměřil na řešení pro realizaci jednodušší, které řeší pouze velikost textových elementů. Nicméně budu rád, podělí-li se někdo komentářem pod článkem o svůj názor.
Nejprve se podívejme na jednoduché demo.
Jak to funguje?
Script je dobré umístit hned za tag body, aby se stránka načetla od začátku v požadovaném zoomu.
1) Definujem id DIVu, který se bude vkládat na začátek dokumentu a který obsahuje styly definující velikosti elementů (nadpisů, odstavců a pod.), ideální výšku okna a elementů, které se budou zmenšovat / zvětšovat.
2) Vypočítáme zoom, tedy poměr ideální a aktuální výšky okna.
3) Sestavíme stylesheet, který se vloží do divu (jehož id jsme definovali na začátku), čímž aktualizujeme zobrazení stránky.
4) Přiřadíme funkci k události resize, aby se stránka přezoomovala při každé změně velikosti okna.
Ukázka scritpu
// <![CDATA[
function resizePage()
{
// idealni vyska okna
var idealHeight = 200;
var styleHolderId = 'styleHolder';
// nastaveni velikosti pro elementy v pixelech
var elements = new Array();
elements['h1'] = 20;
elements['p'] = 10;
// vypocitani zoomu
var actualHeight = $(window).height();
var zoom = actualHeight / idealHeight;
// vypsani stylesheetu
var style = '';
style += '<style type="text/css">';
for(key in elements) { style += key + ' { font-size:'+elements[key] * zoom +'px; }'; }
style += '</style>';
// pokud neexistuje holder stylesheetu, tak jej pridame a vlozime do nej sestavene styly
if ($("#styleHolder").size() == 0) { $("body").prepend('<div id="'+styleHolderId+'"></div>'); }
$("#"+styleHolderId).html(style);
}
resizePage(); $(window).bind('resize', function() { resizePage(); });
// ]]>