Škálovatelný název všech předchozích uživatelských publikací. Názory jsou jako kosti – každý má svůj

Dost často lidé nechápou rozdíl mezi šířkou (šířkou) a šířkou zařízení (a navíc existují příklady s min-device-width a max-device-width) pomocí CSS mediálních dotazů. Toto nedorozumění vede ke špatnému kódu a výrazně více práce pro vývojáře. Tato otázka se často objevuje na fórech SitePoint, takže je čas ji vysvětlit podrobněji. Tento článek se bude věnovat tomuto problému a také se blíže podíváme na to, jakou možnost byste měli při vytváření responzivních webů použít.

Základní definice

Pojďme definovat, co máme na mysli, když mluvíme o mediálních dotazech na základě „šířky“ a „šířky zařízení“. Níže uvedené citace jsou z článku MDN o mediálních dotazech a je zde tato definice „šířky“:

Vlastnost prostředí "width" popisuje šířku zobrazovací plochy výstupního zařízení (například šířku okna dokumentu nebo šířku okna stránky na tiskárně)

A takto MDN definuje „šířku zařízení“:

Popisuje šířku výstupního zařízení (to znamená celou obrazovku nebo stránku, nejen oblast zobrazení, jako je okno dokumentu)

Takže co to vlastně znamená? Jednoduše řečeno, „šířka“ a „šířka zařízení“ označují šířku zařízení, nikoli celou šířku výřezu, což může být zcela odlišný koncept. Jediné, co by vás mělo zajímat, je šířka výřezu bez ohledu na šířku zařízení.

Jak již bylo řečeno, hlavní rozdíl mezi šířkou a šířkou zařízení spočívá v tom, že šířka zařízení vždy neodpovídá oblasti zobrazení konkrétního zařízení.

Většina tabletů a mobilních zařízení nemá vždy 1 pixel zařízení na 1 pixel CSS. Měli byste například vědět, že iPhone 4 má standardní zobrazovací plochu 640x960. To znamená, že v tomto příkladu je šířka zařízení iPhone4 320x480. Jde o to, že Apple chápe, že ne každý web je navržen tak, aby byl responzivní, a snaží se potěšit každého tím, že poskytuje šířku cca 980px pro zobrazení desktopové verze webu. To znamená, že pokud není k dispozici metaznačka zobrazované oblasti, iPhone4 vezme web a vykreslí jej, jako by byl široký 980 pixelů, přičemž jej zmáčkne na obrazovku o šířce 320 pixelů, což má za následek, že se web z pohledu uživatele jeví jako menší.

Začít

Chcete-li začít, stejně jako u všech věcí, které umožňují webům reagovat a využívají mediální dotazy, je třeba umístit značku oblasti meta pro kontrolu do části vašeho webu. Základní standardní verze je uvedena níže.

Jakmile se tento úryvek objeví na naší stránce a zobrazíme stránku na různých zařízeních, spustí se různé dotazy na média. Bez toho se stránka při prohlížení na konkrétním zařízení jednoduše zobrazí jako menší verze stránky; zařízení se pokusí vtěsnat celý web do 320px široké obrazovky. A to není dobré pro vás ani vaše uživatele! Uživatelé neradi přibližují web, aby viděli obsah, a rozhodně se nechtějí posouvat tam a zpět.

Vezměme si například iPhone 4, který má standardní šířku výřezu 980px. Bez metaznačky nebudou vaše pokusy o použití mediálních dotazů mít za následek nic a zařízení nebude správně přistupovat ke standardnímu výřezu. Většina mediálních dotazů je navržena tak, aby měla 500 pixelů nebo méně. To se obvykle provádí pomocí jednoduchého dotazu na média s maximální šířkou. Bez meta tagu nebude mít tento požadavek žádný účinek, protože iPhone 4 bude i nadále zobrazovat verzi webu o šířce 980 pixelů. Podívejme se na příklad níže:

Tělo ( pozadí: bílé; ) @media obrazovka a (min. šířka: 980px) /* Desktop */ ( tělo (pozadí: červené; ) ) @media obrazovka a (maximální šířka: 979px) /* Tablet */ ( tělo ( pozadí: modré; ) ) @media obrazovka a (maximální šířka: 500 pixelů) /* Mobilní */ ( tělo ( pozadí: zelené; ) )

Níže jsou připojeny dva snímky obrazovky pořízené iPhonem 4. Obě stránky mají výše uvedený CSS, ale jedna používá značku meta viewport a druhá nikoli.

Stránka zobrazená výše neobsahuje metaznačku a v důsledku toho se pozadí zobrazuje červeně a napodobuje standardní zobrazovanou oblast o šířce 980 pixelů, nikoli pomocí dotazu na mobilní média o velikosti 500 pixelů.

V tomto případě je metaznačka na svém místě a iOS správně vykreslí stránku tak, jak ji chceme: je založena na šířce 320 pixelů a umožňuje našim mediálním dotazům fungovat tak, jak očekáváme.

Proč zvolit šířku zařízení?

Abych byl upřímný, název tohoto článku zpočátku naznačuje, že nepoužíváte šířku zařízení. Nicméně šířka zařízení má své místo. Pokud vytváříte web pro konkrétní zařízení, pak ano – měli byste použít šířku zařízení.

Z pohledu CSS a RWD je dobrý web takový, který je skutečně „agnostik zařízení“ a nesnaží se podbízet se šířce každého jednotlivého zařízení. Cílení na konkrétní body přerušení pro různé „typy“ zařízení (jako jsou tablety nebo mobilní telefony) je dosaženo tím, že se zaměříte na to, jak se obsah zobrazuje v konkrétní šířce zobrazované oblasti, a podle toho provedete změny v dotazech na média. Body přerušení tedy nediktuje zařízení, ale rozvržení a obsah a v konečném důsledku to může vést k optimálním výsledkům, jak z vašeho pohledu, tak z pohledu uživatelů.

To může být důvod, proč má tolik lidí problémy s vytvářením responzivního designu a proč si stěžují, že je to obtížné. Pokud se ale pokusí navrhnout pro jednotlivá zařízení, bojují prohranou bitvu: počet zařízení, která je potřeba vzít v úvahu (aby pokryli vše), je příliš obrovský a vše jednoduše redukuje na špatný kód. Za zmínku také stojí, že pokud se rozhodnete použít šířku zařízení, musíte také určit samostatná pravidla pro orientaci (na výšku nebo na šířku): šířka zařízení se nemění jen proto, že jste zařízení otočili na bok. To vyžaduje ještě více kódu, což znamená ještě více bolesti hlavy.

Podívejme se však na další možnou možnost

A co "šířka"?

Jsem toho názoru, stejně jako mnoho zkušených vývojářů, že plně responzivní stránka, která se chová podle očekávání na všech možných velikostech obrazovky, je nejjednodušší a cenově nejefektivnější způsob, jak dosáhnout nejúčinnějšího rozvržení pro všechna zařízení.

Chcete-li vytvořit plně responzivní a flexibilní stránku, musí vývojář jednoduše zajistit, aby byly zohledněny všechny zobrazované oblasti a stránka podle potřeby změnila strukturu a velikost, aby vyhovovala obsahu a designu.

Vše, co potřebujete pro plně responzivní stránku, je responzivní web a několik chytrých mediálních dotazů pro zacílení na standardní řadu mobilních zařízení, tabletů, stolních počítačů a zobrazovaných oblastí. Nejraději používám Foundation's Media Queries, které jsou nejpřesnější a pokrývají všechny požadované výřezy.

Samozřejmě, stejně jako všechno ve vývoji, použití dotazů založených na šířce samo o sobě není řešením všech problémů s rozložením. To je spíše nutné pro testování na mobilních zařízeních při hledání různých chyb a zobrazovacích zvláštností. Ale vidět, jak se vše bude zobrazovat na různých mobilních zařízeních, je stejně snadné jako změnit velikost okna prohlížeče.

K testování používám rozšíření pro Chrome Responsive Web Design Tester. Umožňuje vybrat konkrétní zařízení. Uvidíte velikost zařízení a způsob, jakým se bude vaše stránka na daném zařízení zobrazovat.

Další malou výhodou, kterou bych rád zmínil, je to, že používání dotazů založených na šířce zajistí, že budoucí zařízení budou stránky zobrazovat naplno. Jedná se o docela slibný přístup, protože cílíte na něco globálnějšího – celkovou velikost výřezu – spíše než na konkrétní zařízení.

Konečně

Plánujete stále používat šířku zařízení v dotazech na média? Nebyly předložené argumenty dostatečně přesvědčivé? Použití normální "šířky" a výřezu zařízení zjednodušuje responzivní design a je nakonec tou nejlepší možností, která by se měla používat téměř vždy.

Je to oblast okna, ve které lze vidět obsah webu. Ta často nemá stejnou velikost jako vykreslená stránka, v takovém případě prohlížeč nabízí posuvníky, aby se uživatel mohl posouvat a přistupovat k veškerému obsahu.

Zařízení s úzkou obrazovkou (např. mobilní telefony) vykreslují stránky ve virtuálním okně nebo výřezu, který je obvykle širší než obrazovka, a poté vykreslený výsledek zmenšují, aby bylo vidět vše najednou. Uživatelé pak mohou posouvat a přibližovat, aby viděli různé oblasti stránky. Pokud má například mobilní obrazovka šířku 640 pixelů, stránky mohou být vykresleny s virtuální zobrazovanou oblastí 980 pixelů a poté budou zmenšeny, aby se vešly do prostoru 640 pixelů.

To je způsobeno tím, že mnoho stránek není optimalizováno pro mobily a při vykreslování na malou šířku zobrazované oblasti se lámou (nebo alespoň vypadají špatně). Tento virtuální výřez je způsob, jak zajistit, aby weby, které nejsou optimalizovány pro mobily, obecně vypadaly lépe na zařízeních s úzkou obrazovkou.

Zadejte metaznačku zobrazované oblasti

Tento mechanismus však není tak dobrý pro stránky, které jsou optimalizovány pro úzké obrazovky pomocí mediálních dotazů – pokud je virtuální zobrazovaná oblast například 980px, nikdy nebudou použity mediální dotazy s rozlišením 640px nebo 480px nebo méně, což omezuje účinnost takového responzivní designové techniky.

Aby Apple tento problém zmírnil, zavedl „metaznačku viewport“ v Safari iOS, aby umožnil webovým vývojářům ovládat velikost a měřítko viewportu. Mnoho dalších mobilních prohlížečů nyní tuto značku podporuje, i když není součástí žádného webového standardu. Apple“ Dokumentace dobře vysvětluje, jak mohou weboví vývojáři používat tuto značku, ale museli jsme udělat nějakou detektivní práci, abychom zjistili, jak přesně ji implementovat do Fennec. Dokumentace Safari například uvádí, že obsah je „seznam oddělený čárkami“, ale stávající prohlížeče a webové stránky používají jako oddělovače jakoukoli kombinaci čárek, středníků a mezer.

Další informace o výřezech v různých mobilních prohlížečích naleznete v A Tale of Two Viewports na quirksmode.org.

Základy výřezu

Typický web optimalizovaný pro mobily obsahuje něco takového:

Vlastnost width řídí velikost výřezu. Lze jej nastavit na konkrétní počet pixelů, např. width=600, nebo na speciální hodnotu device-width , což je šířka obrazovky v pixelech CSS v měřítku 100 %. (Existují odpovídající hodnoty výšky a výšky zařízení, které mohou být užitečné pro stránky s prvky, které mění velikost nebo polohu na základě výšky zobrazované oblasti.)

Vlastnost initial-scale řídí úroveň přiblížení při prvním načtení stránky. Vlastnosti maximálního měřítka , minimálního měřítka a uživatelsky škálovatelné určují, jak mohou uživatelé stránku přibližovat nebo oddalovat.

Pixel není pixel

V posledních letech se rozlišení obrazovky zvýšilo na velikost, že jednotlivé pixely jsou lidským okem těžko rozeznatelné. Například nejnovější smartphony mají obecně 5palcové obrazovky s rozlišením vyšším než 1920-1080 pixelů (~400 dpi). Z tohoto důvodu může mnoho prohlížečů zobrazovat své stránky v menší fyzické velikosti překladem více hardwarových pixelů pro každý „pixel“ CSS. Zpočátku to způsobilo problémy s použitelností a čitelností na mnoha dotykově optimalizovaných webových stránkách. Peter-Paul Koch psal o tomto problému v A pixel není pixel .

Na obrazovkách s vysokým rozlišením budou stránky s počátečním měřítkem=1 efektivně přiblíženy prohlížeči. Jejich text bude hladký a ostrý, ale jejich bitmapové obrázky pravděpodobně nebudou využívat rozlišení celé obrazovky. Chcete-li získat ostřejší obrázky na těchto obrazovkách, mohou weboví vývojáři chtít navrhnout obrázky – nebo celé rozvržení – ve větším měřítku, než je jejich konečná velikost, a poté je zmenšit pomocí CSS nebo vlastností výřezu. To je v souladu se specifikací CSS 2.1, která říká:

Pokud je hustota pixelů výstupního zařízení velmi odlišná od hustoty typického počítačového displeje, měl by uživatelský agent změnit měřítko hodnot pixelů. Doporučuje se, aby pixelová jednotka odkazovala na celý počet pixelů zařízení, který se nejlépe blíží referenčnímu pixelu. Doporučuje se, aby referenční pixel byl zorný úhel jednoho pixelu na zařízení s hustotou pixelů 96 dpi a vzdáleností od čtečky na délku paže.

Pro webové vývojáře to znamená, že velikost stránky je mnohem menší než skutečný počet pixelů a prohlížeče mohou odpovídajícím způsobem upravit velikost jejich rozložení a obrázků. Pamatujte však, že ne všechna mobilní zařízení mají stejnou šířku; měli byste se ujistit, že vaše stránky fungují dobře ve velkém množství různých velikostí a orientací obrazovky.

Výchozí poměr pixelů závisí na hustotě zobrazení. Na displeji s hustotou menší než 200 dpi je poměr 1,0. Na displejích s hustotou mezi 200 a 300 dpi je poměr 1,5. U displejů s hustotou nad 300 dpi je poměrem celočíselná spodní hranice ( hustota/150 dpi). Všimněte si, že výchozí poměr je pravdivý pouze tehdy, když se měřítko výřezu rovná 1. V opačném případě závisí vztah mezi pixely CSS a pixely zařízení na aktuální úrovni přiblížení.

Šířka výřezu a šířka obrazovky

Weby mohou nastavit svou výřez na konkrétní velikost. Například definici "šířka=320, počáteční měřítko=1" lze použít k přesnému přizpůsobení na malý displej telefonu v režimu na výšku. To může způsobit problémy, když prohlížeč nevykreslí stránku ve větší velikosti. Chcete-li to vyřešit, prohlížeče v případě potřeby rozšíří šířku zobrazované oblasti, aby zaplnila obrazovku v požadovaném měřítku iPad (Výběr výřezu pro weby iPadu od Allena Pikea má pro webové vývojáře dobré vysvětlení.)

U stránek, které nastavují počáteční nebo maximální měřítko, to znamená, že vlastnost width se ve skutečnosti převede na a minimálníšířka výřezu. Pokud například vaše rozvržení potřebuje šířku alespoň 500 pixelů, můžete použít následující označení. Když je obrazovka široká více než 500 pixelů, prohlížeč rozšíří výřez (spíše než přiblíží), aby se vešel na obrazovku:

Další, které jsou k dispozici, jsou minimální měřítko , maximální měřítko a uživatelsky škálovatelné . Tyto vlastnosti ovlivňují počáteční měřítko a šířku a také omezují změny úrovně přiblížení.

Ne všechny mobilní prohlížeče zvládají změny orientace stejným způsobem. Například Mobile Safari často pouze přiblíží stránku při přechodu z orientace na výšku na šířku, místo aby stránku rozložil tak, jak by tomu bylo při původním načtení na šířku. Pokud weboví vývojáři chtějí, aby jejich nastavení měřítka zůstalo konzistentní při přepínání orientace na iPhonu, musí přidat hodnotu maximálního měřítka, aby tomuto přiblížení zabránili, což má někdy nežádoucí vedlejší účinek, že uživatelům brání při přibližování:

Potlačte malé přiblížení používané mnoha chytrými telefony nastavením počátečního měřítka a minimálních hodnot měřítka na 0,86. Výsledkem je potlačení vodorovného posouvání v jakékoli orientaci a uživatel si jej může přiblížit, pokud chce.

Běžné velikosti zobrazovaných oblastí pro mobilní zařízení a tablety

Pokud chcete vědět, která mobilní a tabletová zařízení mají jaké šířky zobrazovaných polí, existuje obsáhlý seznam . To poskytuje informace, jako je šířka zobrazovacího pole na výšku a na šířku, stejně jako fyzická velikost obrazovky, operační systém a hustota pixelů zařízení.

Specifikace

Jasně existuje poptávka po metaznačce viewport, protože ji podporují nejpopulárnější mobilní prohlížeče a používají ji tisíce webových stránek. Bylo by dobré mít skutečný standard pro webové stránky pro ovládání vlastností výřezu. Jak bude proces standardizace pokračovat, my v Mozille budeme pracovat na tom, abychom byli informováni o všech změnách.

Úplný popis meta tagu výřez a jeho atributy. Příklady, poznámky a doporučení pro přizpůsobení webu pro mobilní zařízení. Stejně jako další a užitečné meta tagy: HandheldFriendly, MobileOptimized A Apple-mobile-web-app-capable.

• Metaznačka zobrazované oblasti
  • Atributy metaznaček zobrazení
• Další a užitečné meta tagy
  • Meta tag HandheldFriendly
  • Meta tag MobileOptimized
  • Meta tag apple-mobile-web-app-capable
• Doporučená sada meta tagů

Metaznačka zobrazované oblasti

Meta tag výřezříká prohlížeči přesně, jak zacházet s velikostí stránek a jak je měnit. Tato značka musí být přidána do sekce hlavy.

Poznámka: meta tag rozhledna není součástí formálního standardu a je součástí specifikace Přizpůsobení zařízení CSS(http://goo.gl/FSTGbn). Ale dokud nebude tato specifikace dokončena a široce přijata, doporučuje se používat značku metadat výřez samostatně i v kombinaci se styly @viewport pro účely kompatibility.

Příklad:

Atributy metaznaček zobrazení

Meta tag výřez může mít následující atributy oddělené čárkami (,):

šířka- šířka zobrazovací plochy.

Hodnota atributu je nezáporné celé číslo 200 před 10000 pixelů nebo konstant šířka zařízení, který nastaví šířku stránky tak, aby odpovídala velikosti obrazovky.

Pokud hodnota není uvedena, výchozí je nastaveno na - v mobilním Safari = 980px, Opera = 850px, Android WebKit = 800px, IE = 974px.

Poznámka: Pro weby s responzivním designem se doporučuje použít: width=device-width .

výška- výška pozorovací plochy.

Hodnota atributu je nezáporné celé číslo od 233 před 10000 pixelů nebo konstant výška zařízení, který nastaví výšku stránky tak, aby odpovídala velikosti obrazovky.

Poznámka: pokud je zadán atribut šířka, zadejte atribut výška není nezbytné.

počáteční měřítko- počáteční měřítko stránky.

0.1 před 1.0 . Význam 1.0 definuje měřítko 1:1 , tj. "neškálovat"

Poznámka: na některých operačních systémech (iOS, Windows Phone atd.)Šířka stránky při otočení zůstane nezměněna. Místo redistribuce obsahu je škálován. Proto se doporučuje používat: počáteční měřítko=1,0.

uživatelsky škálovatelné- dostupnost změny měřítka stránky uživatelem.

Hodnota atributu je booleovská " Ano"(1) - lze změnit měřítko nebo " Ne"(0) - nelze změnit měřítko.

Poznámka: Doporučuje se použít hodnotu " Ano", a protože je nainstalován ve výchozím nastavení uživatelsky škálovatelné nemusí být specifikováno.

minimální měřítko- minimální měřítko zobrazovací plochy.

Hodnota atributu je číslo s tečkou od 0.1 před 1.0 . V mobilním prohlížeči Safari je výchozí hodnota 0,25. Význam 1.0 definuje měřítko 1:1 , tj. "neškálovat"

maximální měřítko- maximální měřítko výřezu.

Hodnota atributu je číslo s tečkou od 0.1 před 1.0 . Výchozí mobilní prohlížeč Safari je 1.6. Význam 1.0 definuje měřítko 1:1 , tj. "neškálovat"

Poznámka: vyhnout se atributům uživatelsky škálovatelné, minimální měřítko A maximální měřítko, protože mají negativní dopad na dostupnost obsahu.

Další a užitečné meta tagy

Meta tag HandheldFriendly určuje, zda je stránka webu optimalizována pro mobilní zařízení na Palmu a Blackberry v prohlížeči, jako je AvantGo. Nyní jej uznává mnoho dalších mobilních prohlížečů.

Příklad:

Meta tag MobileOptimized(http://goo.gl/ZpLjZz) nastavuje šířku výřezu v mobilních prohlížečích IE Mobile nebo Pocket IE. Je analogický s atributem šířka v metaznačce výřez.

Příklad:

Meta tag Apple-mobile-web-app-capable(http://goo.gl/VGDYQC) umožňuje, aby stránka fungovala v režimu celé obrazovky, který je relevantní pro mobilní zařízení Apple.

Příklad:

Sada metaznaček, které používám pro weby s responzivním designem, přizpůsobené pro mobilní zařízení:

Když chceme přizpůsobit okno prohlížeče na našem zařízení, obvykle používáme značku HTML . Nicméně, kupodivu, meta tag není „normativní“ – není v oficiálním standardu W3C.

Metaznačku viewport poprvé implementoval Apple do iPhonu a později i další výrobci prohlížečů. Dnes je široce používán díky popularitě iOS, Android a dalších platforem pro tablety a smartphony.

Vzhledem k tomu, že metaznačka viewport slouží čistě k přizpůsobení rozvržení, lze říci, že jde o značku CSS. Proto se W3C snaží standardizovat novou adaptační metodu, která přesune ovládání oken z HTML do CSS.

@viewport pravidlo CSS

S novým pravidlem @viewport máme stejné ovládání okna jako s meta tagem, kromě toho, že toto ovládání se provádí výhradně pomocí CSS. Stejně jako při použití značky metadat se doporučuje nastavit šířku okna prohlížeče pomocí šířky zařízení nezávislé na zařízení:

@viewport (
šířka: šířka zařízení;
}

Dnes @viewport používají programátoři pro „snap mode“ v IE10 – funkci Windows 8, která vám umožňuje pracovat v režimu více oken. Kupodivu IE10 ignoruje meta tag, pokud je velikost okna menší než 400 pixelů, což znemožňuje webům používajícím meta tag optimalizovat pro tak malá okna. K vyřešení tohoto problému by programátoři měli použít parametr šířky zařízení uvedený výše nebo definovat pravidlo @viewport v dotazu na média.

Použití @viewport v dotazech na média

V mediálních dotazech můžeme použít @viewport. Například následující dotaz na média se používá k úpravě rozvržení okna o šířce menší než 400 pixelů (jako je režim více oken v IE10) na šířku 320 pixelů.

@media obrazovka a (max. šířka: 400 pixelů) (
@-ms-viewport ( šířka: 320px; )
...
}

Pokud je v tomto příkladu zařízení nastaveno na rozsah rozlišení 640 až 1024 pixelů, pravidlo @viewport změní měřítko okna na 640 pixelů.

@media obrazovka a (minimální šířka: 640 pixelů) a (maximální šířka: 1024 pixelů) (
@viewport (šířka: 640px; )
...
}

Nové úchyty @viewport

I když můžeme ovládat funkci zoom a zoom, některé vlastnosti výřezu – neboli „úchytky“, jak se jim nyní říká – se změnily.

Zvětšení

Deskriptor zoomu je ekvivalentem počátečního měřítka v metaznačce. Stejně jako minimální a maximální měřítko existují deskriptory pro maximální přiblížení a minimální přiblížení:

@viewport (
šířka: šířka zařízení;
zoom: 2;
}

uživatelský zoom

Deskriptor uživatelského zoomu je ekvivalentní parametru škálovatelného uživatelem

@viewport (
šířka: šířka zařízení;
uživatelský zoom: pevný;
}

Podpora prohlížeče

V současné době je pravidlo @viewport css podporováno pouze Opera a IE10. Vypadá to, že Chrome a další prohlížeče to brzy implementují, protože... Očekává se, že tento meta tag se brzy stane novým oficiálním webovým standardem.

Prozatím musíte k pravidlu @viewport přidat předponu dodavatele:

@-ms-viewport (
šířka: šířka zařízení;
}
@-o-viewport (
šířka: šířka zařízení;
}
@viewport (
šířka: šířka zařízení;
}

Samozřejmě stále musíme zahrnout metaznačku viewport do html stránky, protože... v dohledné době to nikam nevede. Ale není to tak děsivé dívat se do budoucnosti – přidání pravidla @viewport jen připraví naše weby a aplikace na změnu

Obecná chyba

Častou chybou je, že vývojáři často používají initial-scale=1 pro neresponzivní šablony. Toto nastavení způsobí, že se 100 % stránky vykreslí bez změny měřítka. Pokud design není responzivní, musí uživatel buď hodně rolovat, nebo ručně nastavit zoom, aby viděl celou stránku. Nejhorším případem je kombinace user-scalable=no nebo maximum-scale=1 s initial-scale=1. To zakáže možnost škálování na webu. A bez změny měřítka není možné vidět celou stránku. Pokud vaše šablona nereaguje, nedeaktivujte změnu měřítka ani neresetujte počáteční měřítko!

Není pochyb o tom, že při práci s responzivními šablonami používáte metaznačku viewport. Věděli jste ale, že metaznačka viewport může být užitečná i pro neresponzivní šablony? Pokud nemáte čas převést šablonu projektu na responzivní, měli byste si přečíst tento tutoriál a použít metaznačku viewport ke zlepšení vzhledu vašeho návrhu na mobilních zařízeních.

Běžné použití metaznačky viewport

Metaznačka viewport se obvykle používá k nastavení šířky a počátečního měřítka pro viewport na mobilních zařízeních. Zde je příklad.

Použití metaznačky viewport v neresponzivní šabloně

Ve výchozím nastavení je šířka výřezu na iPhone nastavena na 980 pixelů. Ale váš design nemusí dobře odpovídat této řadě. Hodnota může být pro vzor příliš velká nebo malá. Níže jsou uvedeny dva příklady. které používají metaznačku viewport ke zlepšení vzhledu neresponzivní šablony na mobilních zařízeních.

Příklad

Prohlížejte si web Themify ze svého mobilního zařízení.

Levý snímek obrazovky ukazuje vzhled webu bez použití metaznačky viewport. Můžete si všimnout, že se stránka dotýká obou stran obrazovky. Pokud přidáte metaznačku viewport určující šířku 1024px, bude vlevo a vpravo mezera.

Další příklad

Pokud je váš design příliš úzký, bude také vypadat neohrabaně. Řekněme, že šířka kontejneru je 700px a nepřizpůsobí se. V tomto případě bude vzhled vypadat jako na obrázku níže vlevo - široký bílý pruh vlevo.

Problém lze snadno vyřešit nastavením šířky výřezu na 720px. Šířka designu se nemění, ale mobilní zařízení ji zvětší na 720px.

Obecná chyba

Častou chybou je, že vývojáři často používají initial-scale=1 pro neresponzivní šablony. Toto nastavení způsobí, že se 100 % stránky vykreslí bez změny měřítka. Pokud design nereaguje, musí uživatel buď hodně rolovat, nebo ručně nastavit zoom, aby viděl celou stránku. Nejhorším případem je kombinace user-scalable=no nebo maximum-scale=1 s initial-scale=1 . To zakáže možnost škálování na webu. A bez změny měřítka není možné vidět celou stránku. Pokud vaše šablona nereaguje, nedeaktivujte změnu měřítka ani neresetujte počáteční měřítko!