Skip to content

Jak aktivovat a používat režim responzivního designu v Safari

15 de Červen de 2021
mobile apps developers at the office 1145882840 167c06c3bdc44fce98c0bcded6e5181f

Počínaje Safari verze 9 v OS X El Capitan představila společnost Apple režim Responsive Design Mode. Toto rozhraní pomáhá webovým vývojářům navrhovat webové zážitky v různých velikostech, orientacích a rozlišeních obrazovky. Responzivní design pomáhá vývojářům zajistit, aby jejich weby a aplikace podporovaly více zařízení a platforem. Tady je postup, jak povolit režim responzivního designu ve webovém prohlížeči Safari. Informace v tomto článku se vztahují na Safari 13 až Safari 9, zahrnující macOS Catalina přes OS X El Capitan. Režim responzivního designu není k dispozici ve verzi Safari pro Windows, kterou Apple již nepodporuje.

Jak povolit režim responzivního designu v Safari

Chcete-li povolit režim Responzivní design Safari, spolu s dalšími vývojářskými nástroji Safari:

  1. Přejít na Safari menu a vyberte Předvolby. Stiskněte klávesovou zkratku Příkaz+, (čárka) rychlý přístup k předvolbám.

  2. V Předvolby v dialogovém okně vyberte Pokročilý záložka.

    Karta Upřesnit

  3. Ve spodní části dialogového okna vyberte ikonu Zobrazit nabídku Vývoj na liště nabídek zaškrtávací políčko.

    Možnost „Zobrazit vývoj“ v nastavení Safari

  4. Nyní uvidíte Rozvíjet v horní liště nabídky Safari.

    Nabídka Vývoj v Safari

  5. Vybrat Rozvíjet > Vstupte do režimu responzivního designu na panelu nástrojů Safari. Stiskněte klávesovou zkratku Volba+Příkaz+R rychle vstoupit do režimu responzivního designu.

    1623792936 181 Jak aktivovat a pouzivat rezim responzivniho designu v Safari Vstup do režimu responzivního designu.“ class=“lazyload“ id=“mntl-sc-block-image_1-0-29″ >

  6. Aktivní webová stránka se zobrazí v režimu responzivního designu. V horní části stránky vyberte zařízení iOS nebo rozlišení obrazovky a podívejte se, jak se stránka vykreslí.

    Aktivní webová stránka se nyní zobrazí v režimu responzivního designu.

  7. Případně můžete pomocí rozbalovací nabídky nad ikonami rozlišení zjistit, jak se vaše webová stránka vykreslí na různých platformách.

    Podívejte se, jak se vaše webová stránka vykreslí na různých platformách, pomocí rozbalovací nabídky nad ikonami rozlišení.

Nástroje pro vývojáře Safari

Kromě režimu Responzivní design nabízí nabídka Safari Develop další užitečné možnosti.

Další vývojářské nástroje Safari

Otevřít stránku pomocí

Otevře aktivní webovou stránku v libovolném prohlížeči aktuálně nainstalovaném v systému Mac.

Uživatelský agent

Když změníte User Agent, můžete podvádět web, aby si myslel, že používáte jiný prohlížeč.

Zobrazit webového inspektora

Zobrazí všechny zdroje webové stránky, včetně informací CSS a metrik DOM.

Zobrazit chybovou konzolu

Zobrazuje chyby a varování JavaScriptu, HTML a XML.

Zobrazit zdroj stránky

Umožňuje zobrazit zdrojový kód aktivní webové stránky a prohledat její obsah.

Zobrazit zdroje stránky

Zobrazuje dokumenty, skripty, CSS a další zdroje z aktuální stránky.

Zobrazit editor úryvků

Umožňuje upravovat a spouštět fragmenty kódu. Tato funkce je užitečná z hlediska testování.

Zobrazit Extension Builder

Pomáhá vám vytvářet rozšíření Safari tím, že odpovídajícím způsobem zabalí váš kód a připojí metadata.

Spusťte nahrávání na časové ose

Umožňuje zaznamenávat síťové požadavky, provádění JavaScriptu, vykreslování stránek a další události v rámci nástroje WebKit Inspector.

Prázdné mezipaměti

Odstraní všechny uložené mezipaměti v Safari, nejen standardní soubory mezipaměti webových stránek.

Zakázat mezipaměti

S deaktivovaným ukládáním do mezipaměti se prostředky stahují z webu pokaždé, když je vytvořen požadavek na přístup, na rozdíl od použití místní mezipaměti.

Povolte JavaScript z pole inteligentního vyhledávání

Ve výchozím nastavení je tato funkce z bezpečnostních důvodů deaktivována a umožňuje vám do adresního řádku Safari zadávat adresy URL obsahující JavaScript.