Mobilné zariadenia už tvoria obrovskú časť, ak nie väčšinu, online čitateľstva pre mnoho webových stránok, takže je dôležité, aby vaša stránka vyzerala a správne fungovala na telefóne iPhone alebo tablete. Existuje veľa služieb, ktoré ponúkajú ukážky mobilného rozloženia pre danú adresu URL, ale spoločnosť Apple zjednodušila testovanie webových stránok na mobilnú pripravenosť pomocou Safari 9 v OS X El Capitan. Nová funkcia s názvom Responsive Design Mode umožňuje rýchlo zobraziť ukážku toho, ako web vyzerá na rôznych zariadeniach Apple, ako aj na bežné rozlíšenie obrazovky pre mobilné zariadenia. Takto to funguje.
Je dôležité zopakovať, že režim responzívneho dizajnu je novou funkciou, ktorá je v systéme Safari 9 v systéme OS X El Capitan exkluzívna, takže na prístup do tohto systému je potrebné spustiť aspoň tieto verzie prehliadača a operačného systému. Ak váš počítač Mac spĺňa túto požiadavku, musíte najprv povoliť vývojársky režim Safari. Na tento účel spustite Safari a kliknite na Safari na paneli s ponukami. Potom vyberte možnosť Predvoľby> Rozšírené .
Na karte Spresnenie okna Predvoľby Safari začiarknite políčko „Zobraziť ponuku vývoja na paneli s ponukami“. Ako naznačuje názov tejto možnosti, na paneli ponuky Safari napravo od položky sa zobrazí nová ponuka „Rozvinúť“. "záložky".
Potom zatvorte okno Predvoľby prehliadača Safari a prejdite na webovú stránku, ktorú chcete testovať v režime responzívneho dizajnu. Po úplnom načítaní webovej stránky vo vašom prehliadači použite klávesovú skratku Command-Option-R a uvidíte, ako sa okno prehliadača prevedie na ukážku jedného z niekoľkých rozlíšení mobilných zariadení (môžete tiež otvoriť režim responzívneho dizajnu kliknutím na položku Vytvoriť v na paneli ponuky Safari a výberom možnosti Zadať režim responzívneho dizajnu ).
Režim Safari Responsive Design Mode vám umožňuje zobraziť ukážku toho, ako webová stránka vyzerá vo všetkých rozlíšeniach mobilných zariadení spoločnosti Apple, od 3, 5-palcového telefónu iPhone 4S po 12, 9-palcový iPad Pro. Používatelia majú tiež možnosť zvoliť rozlíšenie 1x, 2x alebo 3x „Sietnica“ a zmeniť agenta prehliadača tak, aby napodobňovali správanie najpopulárnejších prehliadačov, ako sú Chrome, Firefox a Edge.
Pre každé zariadenie a veľkosť obrazovky môžu používatelia kliknúť na ikonu zariadenia, aby ste prepli medzi orientáciou na výšku a na šírku, alebo v prípade zariadení, ako sú iPad Air a iPad Pro, ktoré podporujú rozdelené zobrazenie, môžete kliknutím prepínať medzi rôznymi rozloženiami rozdeleného zobrazenia.
Zatiaľ čo v režime responzívneho dizajnu v prehliadači Safari chýbajú niektoré z možností podobných už existujúcich nástrojov, jeho zabudovanie priamo do prehliadača Safari môže byť pre webových dizajnérov obrovským časovým sporiteľom a pre majiteľov webových stránok, ktorí sa chcú ubezpečiť, že ich mobilní návštevníci sa chcú uistiť, získavajú najlepšie skúsenosti bez ohľadu na rozlíšenie alebo veľkosť obrazovky.
Po dokončení testovania môžete režim responzívneho dizajnu opustiť buď zatvorením okna prehliadača alebo karty alebo opätovným stlačením klávesovej skratky Command-Option-R .
