Tip: Znáte pomůcky pro ladění responsivních webů ve Firefoxu a Chrome?

Ladit responsivní weby je zdánlivě jednoduché. Prostě si zmenšíte okno webového prohlížeče a upravujete styly. V okamžiku, kdy potřebujete reagovat na přesné rozměry, potřebujete něco sofistikovanějšího. Nabídnou vám to  Firefox i Chrome v základní výbavě.
reklama

V prohlížeči Chrome používám rozšíření Window Resizer. Umožňuje snadno a rychle změnit velikost prohlížeče na jeden z připravených rozměrů. Ovšem právě ta změna velikosti celého okna, je poněkud nepohodlná. Jste-li zvyklí mít nástroj pro vývojáře ukotvený v okně, pak při změně na mobilní šířku přetvoříte svého pomocníka v nepoužitelný nástroj.

Je tu však poněkud elegantnější řešení. Poté, co zavoláte vývojářský nástroj klepnutím na nějaký prvek na stránce pravým tlačítkem myši a výběrem funkce Prozkoumat prvek, klepněte v něm na ikonku mobilu (tlačítko vedle Lupy). Přepnete se do speciálního režimu, kde lze měnit velikost displeje pro webovou stránku, aniž by se měnila velikost okna Chrome jako takového.

Navíc zde kromě zadání rozměrů displeje můžete vybírat z velké palety nejrůznějších mobilních zařízení.

Responze ve Chrome

Firefox toto řeší podobnou cestou a rovněž bez potřeby instalovat nějaké další rozšíření a doplňky. Stačí, když v něm zavoláte funkci Nástroje >> Vývoj webu >> Responzivní design. V ten okamžik se aktuálně načtená stránka změní na černou plochu s myší nastavitelnou plochou pro zobrazení webu.

V záhlaví této plochy zobrazující web uvidíte rozbalovací nabídku s nejčastějšími velikostmi displejů. Pokud nechcete měnit velikost plochy pro web myší, použijte některou z voleb v této nabídce. Nástroje pro vývojáře nebo Firebug přitom zůstanou přes celou šířku okna Firefoxu.

Responze ve Firefoxu

Užitečným pomocníkem jsou i tlačítka vedle seznamu různých rozlišení (ten lze upravovat). První z nich plochu „mobilního displeje“ otočí o 90°, druhé simuluje události klepnutí na displej a třetí uloží snímek aktuálně zobrazené části webu do souboru.

Tato funkce není ve Firefoxu ani Chrome úplnou novinkou, ale zjistil jsem, že ne každý o ní ví. Snad vám tedy pomůže a urychlí práci na responzivních webech. Já si například této pomůcky v Chrome nevšiml a za tip děkuji Ondrovi Pohorskému.

Tagy
Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

Komentáře k článku

Přidat komentář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
reklama
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

Knihy o Drupalu

Kniha Drupal 8 Kniha Drupal 7 333 tipů a triků pro Drupal
Více na KnihyPolzer.cz

@maxiorel na Twitteru

Maxiorel na Twitteru