Vytvorte snímku obrazovky webovej stránky s rámom zariadenia v prehliadači Chrome
Menej známou funkciou prehliadača Google Chrome v operačných systémoch pre stolné počítače je možnosť zachytiť snímku obrazovky otvorenej stránky, ako keby snímka obrazovky zobrazovala prehliadač spustený na mobilnom zariadení. Môže dokonca pridať rám okolo snímky obrazovky, aby vyzerala ako realistická fotografia smartfónu. Tu je návod, ako to možno urobiť.
V Chrome Developer Tools existuje špeciálny nástroj, ktorý vám umožňuje emulovať mobilné zariadenie. Pre vývojárov je veľmi užitočné skontrolovať, ako ich webové stránky vyzerajú na smartfónoch a zariadeniach s malou obrazovkou. Umožňuje určiť vlastnú veľkosť obrazovky alebo použiť preddefinované veľkosti zariadení, ako sú iPhone, iPad, Nexus alebo Samsung Galaxy. Po zobrazení otvorenej stránky v emulátore zariadenia môže používateľ zachytiť snímku obrazovky stránky. Je tiež možné povoliť rám zariadenia okolo stránky, takže bude vyzerať ako realistická fotografia.
Môžete to urobiť nasledovne.
- Otvorte požadovanú stránku v prehliadači Chrome a stlačte F12. Tým sa otvoria nástroje pre vývojárov:
- Kliknutím na tlačidlo emulátora mobilného zariadenia prepnete režim nástrojov pre vývojárov:
- Pod výberom zariadení vyberte nejaké zariadenie. Napríklad vyberiem iPhone 6:
- Teraz kliknite na ponuku s tromi bodkami napravo od voliča zariadenia a začiarknite možnosť „Zobraziť rám zariadenia“:
- Voila, teraz sa vaša webová stránka zobrazuje v peknom ráme zariadenia:
Teraz znova kliknite na ponuku s tromi bodkami a vyberte možnosť „Zachytiť snímku obrazovky“:
Výsledok bude nasledovný:
Skončil si.