Vytvořte snímek obrazovky webové stránky s rámečkem zařízení v prohlížeči Chrome

Méně známou funkcí operačních systémů Google Chrome pro stolní počítače je schopnost zachytit snímek obrazovky otevřené stránky, jako by pořízený snímek pocházel z prohlížeče spuštěného na mobilním zařízení. Může dokonce přidat rámeček kolem snímku obrazovky, takže vypadá jako realistická fotografie smartphonu. Zde je návod, jak to lze provést.

V Chrome Developer Tools je speciální nástroj, který vám umožňuje emulovat mobilní zařízení. Pro vývojáře je velmi užitečné zkontrolovat, jak jejich webové stránky vypadají na chytrých telefonech a zařízeních s malou obrazovkou. Umožňuje určit vlastní velikost obrazovky nebo použít předdefinované velikosti zařízení, jako je iPhone, iPad, Nexus nebo Samsung Galaxy. Jakmile se otevřená stránka zobrazí v emulátoru zařízení, může uživatel pořídit snímek obrazovky stránky. Je také možné povolit rámeček zařízení kolem stránky, takže bude vypadat jako realistická fotografie.

Můžete to udělat následovně.

1. Otevřete požadovanou stránku v Chrome a stiskněte F12. Otevře se Nástroje pro vývojáře:
2. Klepnutím na tlačítko emulátoru mobilního zařízení přepnete režim nástrojů pro vývojáře:
3. Pod voličem zařízení vyberte nějaké zařízení. Například vyberu iPhone 6:
4. Nyní klikněte na nabídku se 3 tečkami napravo od voliče zařízení a zaškrtněte možnost „Zobrazit rám zařízení“:
5. Voila, nyní se vaše webová stránka zobrazuje uvnitř pěkného rámečku zařízení:
   
   Nyní znovu klikněte na nabídku se třemi tečkami a vyberte „Zachytit snímek obrazovky“:

Výsledek bude následující:

Jsi hotov.