Stránka 1 z 1

Přizpůsobte webovky všem typům zařízením-návod jak na to!

Napsal: 20 bře 2013, 12:20
od sluplik
Velký problém těchto webovek je nepřizpůsobení obrazovky a tím donucení rolování všemi směry pro viditelnost prvků, které hledám. Proto jsem hledal způsob jak optimalizovat tyto stránky a nejjednodušším způsobem ( skoro bez práce ) uplatnit změny v praxi.

Veškerý trik pro přizpůsobení stránek různým zařízením ( jako je mobil, čtečka, PC, NTB, Tablet ... s různým rozlišením) je v CSS stylech.


Zde je ukázka webu v kterém jsou již uplatněny změny pro přizpůsobení zobrazování stránky :
http://css-tricks.com/examples/Resoluti ... le-one.php

stránku si zkuste libovolně zmenšit, či zvětšit a nebo ji otevřete jiným zařízením a zjistíte jak se přizpůsobuje ....
Tato stránka má tyto parametry:
nejmenší okno je nataveno na hodnoty: 700px a méně
prostřední okno je nastaveno na hodnoty: 701 - 900px
největší okno je nastaveno na hodnoty: větší než 901px

číselné hodnoty samozřejmě lze změnit dle vaší představy . Jsou jakýmsi ohraničením velikosti internetového prohlížeče a pokud se dostanou do předefinovaných hodnot uplatní změnu velikosti.

v praxi to vypadá ve zdrojovém kódu takto:

<head>
<link rel='stylesheet' media='screen and (max-width: 700px)' href='css/narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
<link rel='stylesheet' media='screen and (min-width: 901px)' href='css/wide.css' />
</head>


kde např. v prvním odkazovaném stylu s názvem narrow se řeší hlavně vycentrování stránky, dle hlavních hodnot ....
body { background: #333; }
#page-wrap { width: 548px; }
#page-wrap:after { content: "Narrow Layout"; }
#secondary-two { display: none; }


Zde jsou soubory ke stažení šablon ukázkové stránky, podle které se dají uplatnit změny pro webovky LinuxMintu : http://css-tricks.com/examples/Resoluti ... Layout.zip

a tu je zdroj z kterého jsem hlavně vycházel a je tu i mnoho užitečných triků jak posunout webovky do 21.století ...
http://css-tricks.com/resolution-specific-stylesheets/

Re: Přizpůsobte webovky všem typům zařízením-návod jak na to

Napsal: 20 bře 2013, 14:18
od admin
Hezký návrh, leč já to zase za "skoro bez práce" nevidím. Něco jiného je toto provádět na statickém webu a něco jiného v šabloně wordpressu. To bez práce prostě nebude a jedná se o dost velký zásah do kódu. Jinak moc webů z "21. století" jsem tedy ještě neviděl. Z těch co se týkají linuxových dister alespoň o žádném nevím. Roluje se téměř všude. Já osobně si na tuto úpravu netroufám. Je-li zde někdo kdo ano, nechť se ozve a můžete to vyzkoušet na testwebu.

Re: Přizpůsobte webovky všem typům zařízením-návod jak na to

Napsal: 21 bře 2013, 09:13
od ulo
satapouch píše: ... To bez práce prostě nebude a jedná se o dost velký zásah do kódu ... někdo ... se ozve a můžete to vyzkoušet na testwebu.
Souhlasím a z důvodu nedostatku času a lidských zdrojů na tuto rozsáhlejší úpravu - opět bychom to totiž dělali jen ve dvou lidech ve volném čase a jsme holt již pánové od rodin - navrhuji, aby případnému zájemci (popř. zájemcům) na dodělání mobilního obsahu, byl poskytnut obsah našeho css stylu, kde lze vyčíst potřebné jména tříd css a další údaje, které budou potřeba předělat. Zbytek, jako zakomponování nového stylu pro mobil do WP, bychom už udělali sami (popř. jak tu bylo již navrženo na testovacím webu by mohl klidně zájemce vše udělat sám). Díky za pochopení.