Mobilní zařízení již představují obrovskou část, ne-li většinu, online čtenářů pro mnoho webů, takže je důležité, aby váš web vypadal a fungoval správně na iPhone nebo tabletu. Existuje mnoho služeb, které nabízejí náhledy mobilních rozvržení pro danou adresu URL, ale Apple usnadnil testování webů pro mobilní připravenost pomocí Safari 9 v OS X El Capitan. Nová funkce s názvem Responsive Design Mode umožňuje rychle zobrazit náhled vzhledu webu na různých zařízeních Apple i běžných rozlišení obrazovky mobilních zařízení. Takto to funguje.
Je důležité znovu zdůraznit, že režim Responsive Design Mode je nová funkce, která je v systému Safari 9 v systému OS X El Capitan exkluzivní, takže k přístupu do tohoto systému budete muset používat alespoň tyto verze prohlížeče a operačního systému. Pokud váš počítač Mac tento požadavek splňuje, musíte nejprve povolit vývojářský režim Safari. Chcete-li tak učinit, spusťte Safari a klikněte na Safari na panelu nabídek. Poté vyberte Předvolby> Upřesnit .
Na kartě Upřesnit v okně Předvolby Safari zaškrtněte políčko „Zobrazit nabídku vývoje v panelu nabídek“. Jak název napovídá, zobrazí se v pruhu nabídky Safari napravo od nové nabídky „Rozvinout“. „Záložky.“
Poté zavřete okno Předvolby Safari a přejděte na web, který chcete testovat v režimu responzivního designu. Po úplném načtení webu do vašeho prohlížeče použijte klávesovou zkratku Command-Option-R a uvidíte, jak se okno prohlížeče převede do náhledu jednoho z několika rozlišení mobilních zařízení (můžete také otevřít režim responzivního designu kliknutím na tlačítko na panelu nabídek Safari a vyberte Enter Responsive Design Mode ).
Režim Safari Responsive Design Mode umožňuje zobrazit náhled vzhledu webu na všech rozlišeních mobilních zařízení Apple, od 3, 5palcového zařízení iPhone 4S po 12, 9palcového zařízení iPad Pro. Uživatelé mají také možnost zvolit rozlišení 1x, 2x nebo 3x „Sítnice“ a změnit agenta prohlížeče tak, aby napodoboval chování většiny oblíbených prohlížečů, jako jsou Chrome, Firefox a Edge.
Pro každé zařízení a velikost obrazovky mohou uživatelé kliknout na ikonu zařízení a přepínat mezi orientací na výšku a na šířku, nebo u zařízení jako iPad Air a iPad Pro, která podporují rozdělené zobrazení, můžete klepnutím otáčet mezi různými rozloženími rozděleného zobrazení.
Přestože v režimu Safari Responsive Design Mode chybí některé z možností podobných již existujících nástrojů, jeho vestavba přímo do Safari může být pro webové designéry obrovským šetřičem času a skvělým nástrojem pro učení a testování pro majitele webových stránek, kteří se chtějí ujistit, že jejich mobilní návštěvníci získávají nejlepší zážitek bez ohledu na rozlišení nebo velikost obrazovky.
Po dokončení testování můžete režim responzivního designu opustit buď zavřením okna nebo karty prohlížeče, nebo opětovným stisknutím klávesové zkratky Command-Option-R .
