Nyní máte vy nebo někdo, koho znáte, iPad. Apple samozřejmě připravoval lidi na to, jak navrhnout své webové stránky pro optimální použití s iPadem (viz Příprava vašeho webového obsahu pro iPad). Tou největší je samozřejmě absence podpory Flash na iPadu. Apple místo toho tlačí lidi, aby používali „HTML5“. Dal jsem to do uvozovek, protože většina kontextů, ve kterých jsem to viděl, byla matoucí. Zdá se, že Apple pod pojmem „HTML5“ myslí to, že chtějí, abyste používali <video> místo Flash videa a jejich CSS animací a přechodů místo Flash efektů.
Pomineme-li sémantiku, existuje mnoho informací o tom, jak lze váš web upravit tak, aby co nejlépe fungoval s iPadem, a rád bych k tomuto souboru znalostí přidal několik drobností.
Řetězec uživatelského agenta
Dříve odkazovaný příspěvek popisuje uživatelského agenta Safari pro iPad v následujícím formátu:
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
Toto byl řetězec user-agent během fáze testování beta. Formát se pro konečné vydání mírně liší:Ačkoli se zdá, že se jedná o oficiální řetězec user-agent, obdržel jsem zprávy o takovém user-agent:
Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10
Všimněte si přidání „iPhone“ do segmentu operačního systému řetězce user-agent. Tím se řetězec user-agent pro Safari na iPadu více shoduje s řetězcem Safari na iPhone a iPod Touch, které mají následující řetězce user-agent:
Mozilla/5.0 (iPod; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16
Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16
To znamená, že jediné čichání řetězce user-agent pro „iPhone“ vrátí hodnotu true ve všech třech případech. Problém je samozřejmě v tom, že možná budete chtít na iPhonu/iPodu Touch nabízet jiné zážitky než na iPadu. Ujistěte se, že jste dvakrát zkontrolovali všechna sledování uživatelských agentů navržená tak, aby cílila na tato zařízení.
Detekce iPadu JavaScript
Pokud se pokoušíte detekovat iPad pomocí JavaScriptu, existuje velmi jednoduchý způsob, jak to udělat:zaškrtněte navigator.platform . Hodnota navigator.platform je vždy „iPad“, když je uživatelským agentem Safari pro iPad. To navazuje na tradici „iPhone“ pro iPhone a „iPod“ pro iPod Touch. Toto je nejpřesnější způsob, jak zjistit iPad z JavaScriptu, za předpokladu, že nechcete provádět úplné čichání řetězce user-agent.
function isIPad(){
return navigator.platform == "iPad";
}
Také mějte na paměti, že navigator.platform se nezmění, ani když se změní řetězec user-agent pro prohlížeč.
Rozměry a orientace obrazovky
V dokumentaci k iPadu se uvádí, že rozlišení obrazovky je 1024×768 na rozdíl od 480×320 pro iPhone/iPod Touch. Rozlišení obrazovky můžete zjistit pomocí JavaScriptu pomocí screen.width a screen.height , i když to na iPadu nemusí fungovat tak, jak očekáváte. Člověk by si myslel, že šířka obrazovky bude 768 při svislém držení a 1024 při vodorovném držení. Nicméně screen.width je vždy 768 bez ohledu na způsob, jakým držíte iPad; podobně, screen.height je vždy 1024. Stojí za zmínku, že se jedná o stejné chování jako u zařízení iPhone a iPod Touch.
Safari na iPadu podporuje window.orientation vlastnost, takže v případě potřeby ji můžete použít k určení, zda je uživatel v horizontálním nebo vertikálním režimu. Jako připomínka této funkce:
window.orientationje 0 při svislém drženíwindow.orientationje 90 při otočení o 90 stupňů doleva (vodorovně)window.orientationje -90 při otočení o 90 stupňů doprava (vodorovně)
Existuje také orientationchange událost, která se spustí na window objekt, když se zařízení otáčí.
Můžete také použít dotazy na média CSS k určení, zda je iPad držen ve svislé nebo vodorovné orientaci, například:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Tímto způsobem můžete zacílit styly konkrétně na různé orientace. Další informace naleznete v části CSS Orientation CSS.
Mobilní Safari je mobilní Safari
Dobrou zprávou pro webové vývojáře je, že mezi Safari na iPadu a Safari na iPhonu nebo iPodu Touch není velký rozdíl. I když je řetězec user-agent jiný a velikost obrazovky je jiná, základní prohlížeč zůstává stejný. Všechny funkce, o kterých jste se naučili, jako jsou události dotyků a gest, jsou tedy pro iPad k dispozici. Tyto události spolu s dalšími funkcemi specifickými pro mobilní Safari pokrývám v Professional JavaScript for Web Developers, 2nd Edition.
**Aktualizace (8. dubna 2010):**Přidány odkazy na CSS pro orientaci iPadu.
**Aktualizace (21. dubna 2010):**Aktualizovaný popis řetězců user-agent.