{"id":9408,"date":"2023-08-25T00:00:00","date_gmt":"2023-08-25T00:00:00","guid":{"rendered":"https:\/\/tech-lib.eu\/tech\/jak-zobrazit-mobilni-verzi-webove-stranky-v-prohlizeci-chrome-pro-stolni-pocitace\/"},"modified":"2023-08-25T00:00:00","modified_gmt":"2023-08-25T00:00:00","slug":"jak-zobrazit-mobilni-verzi-webove-stranky-v-prohlizeci-chrome-pro-stolni-pocitace","status":"publish","type":"post","link":"https:\/\/tech-lib.eu\/tech\/jak-zobrazit-mobilni-verzi-webove-stranky-v-prohlizeci-chrome-pro-stolni-pocitace\/","title":{"rendered":"Jak zobrazit mobiln\u00ed verzi webov\u00e9 str\u00e1nky v prohl\u00ed\u017ee\u010di Chrome pro stoln\u00ed po\u010d\u00edta\u010de"},"content":{"rendered":"<div class=\"articlecontent\">\n<div class=\"newlinediv\"><\/div>\n<p> P\u0159em\u00fd\u0161leli jste n\u011bkdy p\u0159i \u010dten\u00ed webov\u00e9 str\u00e1nky na po\u010d\u00edta\u010di, jak se zobraz\u00ed na mobiln\u00edm za\u0159\u00edzen\u00ed? Mo\u017en\u00e1 jste webov\u00fd design\u00e9r nebo v\u00fdvoj\u00e1\u0159 a chcete se ujistit, \u017ee va\u0161e webov\u00e9 str\u00e1nky vypadaj\u00ed fantasticky jak na po\u010d\u00edta\u010di, tak na mobiln\u00edch za\u0159\u00edzen\u00edch. A\u0165 u\u017e je d\u016fvod jak\u00fdkoli, pou\u017eit\u00ed prohl\u00ed\u017ee\u010de Chrome na stoln\u00edm po\u010d\u00edta\u010di k zobrazen\u00ed mobiln\u00ed verze webu je vlastn\u011b docela jednoduch\u00e9. Tento p\u0159\u00edsp\u011bvek v\u00e1s provede pot\u0159ebn\u00fdmi kroky a poskytne odpov\u011bdi na n\u011bkter\u00e9 souvisej\u00edc\u00ed dotazy. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> 1. Pou\u017eit\u00ed prohl\u00ed\u017ee\u010de Chrome v po\u010d\u00edta\u010di k zobrazen\u00ed mobiln\u00ed verze webov\u00e9 str\u00e1nky: <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> K zobrazen\u00ed mobiln\u00ed verze webov\u00e9 str\u00e1nky pou\u017eijte vestav\u011bn\u00e9 n\u00e1stroje pro v\u00fdvoj\u00e1\u0159e v prohl\u00ed\u017ee\u010di Chrome ve stoln\u00edm po\u010d\u00edta\u010di. Postup je n\u00e1sleduj\u00edc\u00ed: <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> Krok 1: Spus\u0165te prohl\u00ed\u017ee\u010d Chrome na stoln\u00edm po\u010d\u00edta\u010di a otev\u0159ete webovou str\u00e1nku, kterou chcete zobrazit. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> Krok 2: Klikn\u011bte kdekoli na webov\u00e9 str\u00e1nce prav\u00fdm tla\u010d\u00edtkem my\u0161i a z kontextov\u00e9 nab\u00eddky vyberte mo\u017enost &#8222;Inspect&#8220;. Alternativn\u011b m\u016f\u017eete stisknout kl\u00e1vesy Ctrl+Shift+I v po\u010d\u00edta\u010di se syst\u00e9mem Windows nebo Command+Option+I v po\u010d\u00edta\u010di Mac. <\/p>\n<div class=\"title\"> Pot\u00e9 se zobraz\u00ed panel N\u00e1stroje pro v\u00fdvoj\u00e1\u0159e Chrome, kter\u00fd se m\u016f\u017ee nach\u00e1zet v lev\u00e9, prav\u00e9 nebo spodn\u00ed \u010d\u00e1sti okna prohl\u00ed\u017ee\u010de. <\/div>\n<p> Krok 3: V nab\u00eddce N\u00e1stroje pro v\u00fdvoj\u00e1\u0159e vyberte mo\u017enost &#8222;P\u0159epnout panel n\u00e1stroj\u016f za\u0159\u00edzen\u00ed&#8220;. Podob\u00e1 se mal\u00e9 ikon\u011b telefonu nebo tabletu a obvykle se nach\u00e1z\u00ed v lev\u00e9m horn\u00edm rohu panelu. Panel n\u00e1stroj\u016f pro dan\u00e9 za\u0159\u00edzen\u00ed bude nyn\u00ed aktivn\u00ed. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> Krok 4: Na panelu n\u00e1stroj\u016f za\u0159\u00edzen\u00ed se automaticky zobraz\u00ed responzivn\u00ed zobrazen\u00ed. Klikn\u011bte na rozev\u00edrac\u00ed nab\u00eddku v horn\u00ed \u010d\u00e1sti panelu n\u00e1stroj\u016f za\u0159\u00edzen\u00ed a vyberte ze seznamu mobiln\u00ed za\u0159\u00edzen\u00ed pro p\u0159echod do mobiln\u00edho zobrazen\u00ed. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> Po v\u00fdb\u011bru mobiln\u00edho za\u0159\u00edzen\u00ed se webov\u00e1 str\u00e1nka znovu na\u010dte, abyste si mohli prohl\u00e9dnout, jak vypad\u00e1 na dan\u00e9m za\u0159\u00edzen\u00ed. Webov\u00e1 str\u00e1nka umo\u017e\u0148uje interakci s n\u00ed podobn\u011b jako na mobiln\u00edm za\u0159\u00edzen\u00ed. Jak zajistit, aby webov\u00e9 str\u00e1nky vypadaly stejn\u011b na stoln\u00edch i mobiln\u00edch za\u0159\u00edzen\u00edch: <\/p>\n<div class=\"title\"> 2. Aby webov\u00e9 str\u00e1nky nab\u00edzely konzistentn\u00ed u\u017eivatelsk\u00fd z\u00e1\u017eitek, mus\u00ed vypadat stejn\u011b na stoln\u00edch i mobiln\u00edch za\u0159\u00edzen\u00edch. Zde je n\u011bkolik doporu\u010den\u00ed: <\/div>\n<p> Pou\u017eijte strategii responzivn\u00edho designu, kter\u00e1 uprav\u00ed styl a obsah webu podle za\u0159\u00edzen\u00ed u\u017eivatele. T\u00edm zaru\u010d\u00edte, \u017ee web bude vypadat dob\u0159e na obrazovk\u00e1ch v\u0161ech velikost\u00ed. Implementujte do k\u00f3du CSS dotazy na m\u00e9dia, abyste ur\u010dili r\u016fzn\u00e9 styly pro r\u016fzn\u00e9 velikosti obrazovek. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> b. T\u00edmto zp\u016fsobem m\u016f\u017eete m\u011bnit vzhled webu v z\u00e1vislosti na pou\u017eit\u00e9m za\u0159\u00edzen\u00ed. d. Strategie mobile-first: Va\u0161e webov\u00e9 str\u00e1nky by m\u011bly b\u00fdt navr\u017eeny a vyvinuty s ohledem na mobiln\u00ed za\u0159\u00edzen\u00ed. Rozlo\u017een\u00ed pro v\u011bt\u0161\u00ed obrazovky by m\u011blo b\u00fdt nejprve vylep\u0161eno pro mobiln\u00ed za\u0159\u00edzen\u00ed. Tato strategie zaru\u010duje, \u017ee va\u0161e webov\u00e9 str\u00e1nky jsou vytvo\u0159eny s ohledem na optimalizaci pro mobiln\u00ed za\u0159\u00edzen\u00ed. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> 3. Jak pozn\u00e1m, zda je webov\u00e1 str\u00e1nka otev\u0159en\u00e1 na stoln\u00edm nebo mobiln\u00edm za\u0159\u00edzen\u00ed? Chcete-li zjistit, zda je webov\u00e1 str\u00e1nka otev\u0159en\u00e1 na mobiln\u00edm nebo stoln\u00edm za\u0159\u00edzen\u00ed, m\u016f\u017eete zkontrolovat \u0159et\u011bzec user agent. \u0158et\u011bzec user agent je informace odeslan\u00e1 prohl\u00ed\u017ee\u010dem webov\u00e9 str\u00e1nce, kter\u00e1 ud\u00e1v\u00e1 typ pou\u017eit\u00e9ho za\u0159\u00edzen\u00ed a prohl\u00ed\u017ee\u010de. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> Kliknut\u00edm prav\u00fdm tla\u010d\u00edtkem my\u0161i na webovou str\u00e1nku, v\u00fdb\u011brem mo\u017enosti &#8222;Zkontrolovat&#8220; a n\u00e1sledn\u00fdm v\u00fdb\u011brem mo\u017enosti &#8222;P\u0159epnout panel n\u00e1stroj\u016f za\u0159\u00edzen\u00ed&#8220; v prohl\u00ed\u017ee\u010di Chrome m\u016f\u017eete zkontrolovat \u0159et\u011bzec user agent. Na panelu n\u00e1stroj\u016f za\u0159\u00edzen\u00ed vyhledejte v horn\u00ed \u010d\u00e1sti rozbalovac\u00ed nab\u00eddku, kter\u00e1 zobrazuje aktu\u00e1ln\u011b vybran\u00e9 za\u0159\u00edzen\u00ed a agenta u\u017eivatele. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> 4. Jak\u00e1 je zkratka pro mobiln\u00ed zobrazen\u00ed? <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> Jak ji\u017e bylo zm\u00edn\u011bno, kl\u00e1vesov\u00e1 zkratka pro otev\u0159en\u00ed panelu n\u00e1stroj\u016f pro v\u00fdvoj\u00e1\u0159e v prohl\u00ed\u017ee\u010di Chrome je Ctrl+Shift+I (Windows) nebo Command+Option+I (Mac). Po otev\u0159en\u00ed panelu m\u016f\u017eete panel n\u00e1stroj\u016f za\u0159\u00edzen\u00ed aktivovat kliknut\u00edm na tla\u010d\u00edtko &#8222;P\u0159epnout panel n\u00e1stroj\u016f za\u0159\u00edzen\u00ed&#8220; nebo pomoc\u00ed kl\u00e1vesov\u00e9 zkratky Ctrl+Shift+M (Windows) nebo Command+Shift+M (Mac). <\/p>\n<div class=\"title\"> Upozor\u0148ujeme, \u017ee konkr\u00e9tn\u00ed kl\u00e1vesov\u00e1 zkratka pro mobiln\u00ed zobrazen\u00ed se m\u016f\u017ee li\u0161it v z\u00e1vislosti na verzi prohl\u00ed\u017ee\u010de Chrome nebo opera\u010dn\u00edm syst\u00e9mu, kter\u00fd pou\u017e\u00edv\u00e1te. <\/div>\n<p> 5. Jak mohu zobrazit mobiln\u00ed obrazovku na sv\u00e9m notebooku? <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> Chcete-li vid\u011bt obrazovku mobiln\u00edho telefonu na notebooku, m\u016f\u017eete pou\u017e\u00edt r\u016fzn\u00e9 aplikace pro zrcadlen\u00ed obrazovky nebo vzd\u00e1len\u00fd p\u0159\u00edstup. Mezi obl\u00edben\u00e9 mo\u017enosti pat\u0159\u00ed nap\u0159: <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> a. Vysor: Vysor je roz\u0161\u00ed\u0159en\u00ed prohl\u00ed\u017ee\u010de Chrome, kter\u00e9 umo\u017e\u0148uje zrcadlit obrazovku za\u0159\u00edzen\u00ed se syst\u00e9mem Android na po\u010d\u00edta\u010di. Nainstalujte aplikaci Vysor do za\u0159\u00edzen\u00ed se syst\u00e9mem Android a roz\u0161\u00ed\u0159en\u00ed Vysor do prohl\u00ed\u017ee\u010de Chrome a podle pokyn\u016f nava\u017ete spojen\u00ed. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> b. AirDroid: AirDroid je dal\u0161\u00ed u\u017eite\u010dn\u00e1 aplikace, kter\u00e1 umo\u017e\u0148uje zrcadlit obrazovku za\u0159\u00edzen\u00ed Android v po\u010d\u00edta\u010di. Nainstalujte aplikaci AirDroid do za\u0159\u00edzen\u00ed se syst\u00e9mem Android a p\u0159ihlaste se ke stejn\u00e9mu \u00fa\u010dtu v po\u010d\u00edta\u010di. Pot\u00e9 m\u016f\u017eete k za\u0159\u00edzen\u00ed p\u0159istupovat a ovl\u00e1dat jej z webov\u00e9ho rozhran\u00ed AirDroid. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> c. Zrcadlen\u00ed obrazovky iOS: Pokud m\u00e1te za\u0159\u00edzen\u00ed se syst\u00e9mem iOS, m\u016f\u017eete pomoc\u00ed vestav\u011bn\u00fdch funkc\u00ed, jako je AirPlay, nebo aplikac\u00ed t\u0159et\u00edch stran, jako je Reflector nebo LonelyScreen, zrcadlit obrazovku sv\u00e9ho za\u0159\u00edzen\u00ed na po\u010d\u00edta\u010di. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> Z\u00e1v\u011brem lze \u0159\u00edci, \u017ee zobrazen\u00ed mobiln\u00ed verze webov\u00e9 str\u00e1nky ve stoln\u00edm prohl\u00ed\u017ee\u010di Chrome lze snadno prov\u00e9st pomoc\u00ed n\u00e1stroj\u016f pro v\u00fdvoj\u00e1\u0159e. Vyu\u017eit\u00edm technik responzivn\u00edho designu a osv\u011bd\u010den\u00fdch postup\u016f m\u016f\u017eete zajistit, aby va\u0161e webov\u00e9 str\u00e1nky vypadaly konzistentn\u011b na mobiln\u00edch i stoln\u00edch za\u0159\u00edzen\u00edch. Chcete-li zjistit, zda je webov\u00e1 str\u00e1nka otev\u0159ena v mobiln\u00edm nebo stoln\u00edm po\u010d\u00edta\u010di, m\u016f\u017eete zkontrolovat \u0159et\u011bzec user agent ve v\u00fdvoj\u00e1\u0159sk\u00fdch n\u00e1stroj\u00edch Chrome. Krom\u011b toho lze k zobrazen\u00ed a ovl\u00e1d\u00e1n\u00ed obrazovky mobiln\u00edho za\u0159\u00edzen\u00ed na notebooku pou\u017e\u00edt zrcadlen\u00ed obrazovky nebo aplikace pro vzd\u00e1len\u00fd p\u0159\u00edstup.<\/p><\/div>\n<div class=\"questions\">\n<div class=\"questionstitle\">FAQ<\/div>\n<div class=\"question\">\n<div class=\"qtitle\"> Jak zobraz\u00edm mobiln\u00ed weby na sv\u00e9m stoln\u00edm Safari?<\/div>\n<p> Chcete-li zobrazit mobiln\u00ed weby ve stoln\u00edm prohl\u00ed\u017ee\u010di Safari, m\u016f\u017eete postupovat podle n\u00e1sleduj\u00edc\u00edch krok\u016f: <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> 1. Otev\u0159ete prohl\u00ed\u017ee\u010d Safari: Spus\u0165te prohl\u00ed\u017ee\u010d Safari na stoln\u00edm po\u010d\u00edta\u010di. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> 2. Povolte re\u017eim pro v\u00fdvoj\u00e1\u0159e: P\u0159ejd\u011bte na panel nab\u00eddek Safari a klikn\u011bte na &#8222;Safari&#8220; &gt; &#8222;P\u0159edvolby&#8220;. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> 3. Z\u00edskejte p\u0159\u00edstup k n\u00e1stroj\u016fm pro v\u00fdvoj\u00e1\u0159e: V okn\u011b P\u0159edvolby klikn\u011bte na kartu &#8222;Roz\u0161\u00ed\u0159en\u00e9&#8220;. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> 4. Povolte nab\u00eddku pro v\u00fdvoj\u00e1\u0159e: Za\u0161krtn\u011bte pol\u00ed\u010dko vedle polo\u017eky &#8222;Zobrazit nab\u00eddku Vyv\u00edjet v panelu nab\u00eddek&#8220;. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> 5. Otev\u0159ete N\u00e1stroje pro v\u00fdvoj\u00e1\u0159e: Nyn\u00ed se v panelu nab\u00eddek zobraz\u00ed nov\u00e1 mo\u017enost &#8222;Develop&#8220; (Vyv\u00edjet). Klepn\u011bte na ni a z rozev\u00edrac\u00ed nab\u00eddky vyberte mo\u017enost &#8222;Enter Responsive Design Mode&#8220;. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> 6. P\u0159epn\u011bte se do mobiln\u00edho zobrazen\u00ed: Po vstupu do re\u017eimu Responsive Design Mode m\u016f\u017eete v horn\u00ed \u010d\u00e1sti okna prohl\u00ed\u017ee\u010de vybrat r\u016fzn\u00e9 mo\u017enosti pro mobiln\u00ed za\u0159\u00edzen\u00ed. Vyberte po\u017eadovan\u00e9 za\u0159\u00edzen\u00ed pro zobrazen\u00ed mobiln\u00ed verze webu. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> Podle t\u011bchto krok\u016f m\u016f\u017eete snadno zobrazit mobiln\u00ed verze webov\u00fdch str\u00e1nek v prohl\u00ed\u017ee\u010di Safari pro stoln\u00ed po\u010d\u00edta\u010de.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>P\u0159em\u00fd\u0161leli jste n\u011bkdy p\u0159i \u010dten\u00ed webov\u00e9 str\u00e1nky na po\u010d\u00edta\u010di, jak se zobraz\u00ed na mobiln\u00edm za\u0159\u00edzen\u00ed? Mo\u017en\u00e1 jste webov\u00fd design\u00e9r nebo v\u00fdvoj\u00e1\u0159 a chcete se ujistit, \u017ee va\u0161e webov\u00e9 str\u00e1nky vypadaj\u00ed fantasticky jak na po\u010d\u00edta\u010di, tak na mobiln\u00edch za\u0159\u00edzen\u00edch. A\u0165 u\u017e je d\u016fvod jak\u00fdkoli, pou\u017eit\u00ed prohl\u00ed\u017ee\u010de Chrome na stoln\u00edm po\u010d\u00edta\u010di k zobrazen\u00ed mobiln\u00ed verze webu je &#8230; <a title=\"Jak zobrazit mobiln\u00ed verzi webov\u00e9 str\u00e1nky v prohl\u00ed\u017ee\u010di Chrome pro stoln\u00ed po\u010d\u00edta\u010de\" class=\"read-more\" href=\"https:\/\/tech-lib.eu\/tech\/jak-zobrazit-mobilni-verzi-webove-stranky-v-prohlizeci-chrome-pro-stolni-pocitace\/\" aria-label=\"\u010c\u00edst v\u00edce o Jak zobrazit mobiln\u00ed verzi webov\u00e9 str\u00e1nky v prohl\u00ed\u017ee\u010di Chrome pro stoln\u00ed po\u010d\u00edta\u010de\">\u010c\u00edst d\u00e1l<\/a><\/p>\n","protected":false},"author":4178,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[199],"tags":[],"class_list":["post-9408","post","type-post","status-publish","format-standard","hentry","category-prohlizeni-webu"],"_links":{"self":[{"href":"https:\/\/tech-lib.eu\/tech\/wp-json\/wp\/v2\/posts\/9408","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tech-lib.eu\/tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tech-lib.eu\/tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tech-lib.eu\/tech\/wp-json\/wp\/v2\/users\/4178"}],"replies":[{"embeddable":true,"href":"https:\/\/tech-lib.eu\/tech\/wp-json\/wp\/v2\/comments?post=9408"}],"version-history":[{"count":0,"href":"https:\/\/tech-lib.eu\/tech\/wp-json\/wp\/v2\/posts\/9408\/revisions"}],"wp:attachment":[{"href":"https:\/\/tech-lib.eu\/tech\/wp-json\/wp\/v2\/media?parent=9408"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tech-lib.eu\/tech\/wp-json\/wp\/v2\/categories?post=9408"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tech-lib.eu\/tech\/wp-json\/wp\/v2\/tags?post=9408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}