Jak ladit webové stránky na iPadu (resp. iOS) s pomocí Safari

Někdy se může stát, že některé prvky stránek se na iPhone nebo iPadu mohou zobrazit odlišně oproti své podobě v počítači. Pro iOS sice existuje Firebug, jeho ovládání je však nepohodlné. Přitom se tu nabízí mnohem pohodlnější způsob ladění stránky na iOS.
reklama

Zobrazení stránky na iPadu nebo jakémkoli jiném zařízení s operačním systémem iOS se může lišit od toho, co je v počítači. V několika případech se mi to stalo i při porovnání Safari na OS X a iOS, ale obvykle se tak děje při srovnání iOS vs. cokoli s Windows. Podobně, jako když srovnáte OS X s Windows.

Problém je často ve vykreslování písem, kdy vyhlazování v produktech Applu je jiné, než ve Windows. Apple má písmenka hladší a tučnější, Windows kostrbatější a tenčí. Nezávisle na prohlížeči, i když i mezi nimi jsou rozdíly.

Následkem toho může být, že se vám některé popisky nevejdou do nachystaných „škatulek“ na webu a je třeba měnit například margin nebo padding v kaskádových stylech. Ale je to jen jeden příklad z mnoha, kdy můžete potřebovat odladit vzhled na iOS tak, aby odpovídal tomu, co je v počítači.

Firebug v iOS

V App Store najdete prográmek nazvaný iDebug. Je to vlastně webový prohlížeč s jádrem WebKit, do kterého je zabudovaný Firebug Lite spolu s nástroji Google page speed a GTMetrix. Nabídne vám základní možnosti úpravy stylů na stránce, podobně jako v mnohem komfortnější podobě Firebug v desktopovém Firefoxu.

U iPadu nemám klávesnici, takže nedovedu říci, jak pohodlně by se iDebug ovládal s ní. Na dotykovém displeji to každopádně moc pohodlné není.

Laďte v počítači, koukejte na iPadu

V porovnání s iDebugem mi následující řešení přijde mnohem pohodlnější. Vyžaduje sice propojení iPadu s počítačem pomocí USB kablíku, ale to není nic nepřekonatelného.

  1. V iPadu přejděte do Nastavení > Safari > Ostatní a zapněte volbu Inspektor Webu.
  2. Nyní připojte iPad k počítači a spusťte na něm desktopové Safari.
  3. Na iPadu načtěte stránku, kterou chcete ladit.
  4. V desktopovém Safari otevřete nabídku Develop. Uvidíte v ní nabídku s názvem vašeho zařízení.
  5. Zvolte si zde jednu z otevřených stránek, kterou chcete ladit.
  6. Otevře se nástroj Web Inspector, který byste již měli znát z běžné práce při ladění webu.

Pokud Safari běžně nepoužíváte, pak ani v takovém případě byste neměli mít s Web Inspectorem problém. Funguje podobně jako jiné vývojářské nástroje v ostatních prohlížečích.

Safari Web Inspector

Jakmile najedete myší nad některý prvek v HTML struktuře, tak se tento prvek automaticky zamodří na stránce v iPadu. Po kliknutí na něj se vám v levé části Web Inspectoru objeví sada použitých stylů, které můžete libovolně editovat a zjistit tak, co je potřeba ve zdrojovém kódu přepsat.

Ladění stránky v iPadu

Pokud náhodou nevidíte nabídku Develop, pak musíte v nastavení Safari přejít na záložku Advanced a menu Develop si zapnout.

Bohužel výše uvedený postup funguje jen v OS X. Ve Windows se vám v Safari iPad neobjeví ani po instalaci iTunes. Zkoušel jsem to ovšem jen s iOS 6. Můžete-li potvrdit pro sedmičku, budu rád.

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
Nové diskuze
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