HTML: Značka zobrazenia: kedy, ako a kde ju správne použiť? Použitie metaznačky výrezu na ovládanie rozloženia v mobilných prehliadačoch Vyplnenie výrezu.

Niet pochýb o tom, že pri práci s responzívnymi šablónami používate metaznačku viewport. Vedeli ste však, že metaznačka viewport môže byť užitočná aj pre neresponzívne šablóny? Ak nemáte čas na konverziu šablóny projektu na responzívnu, mali by ste si prečítať tento návod na použitie metaznačky výrezu na zlepšenie vzhľadu vášho návrhu na mobilných zariadeniach.

Bežné používanie metaznačky zobrazovanej oblasti

Metaznačka zobrazovanej oblasti sa zvyčajne používa na nastavenie šírky a počiatočnej mierky pre oblasť zobrazenia na mobilných zariadeniach. Tu je príklad.

Použitie metaznačky zobrazovanej oblasti v neresponzívnej šablóne

V predvolenom nastavení je šírka výrezu na iPhone nastavená na 980 pixelov. Váš dizajn však nemusí dobre zapadať do tohto rozsahu. Hodnota môže byť pre vzor príliš veľká alebo malá. Nižšie sú uvedené dva príklady. ktoré používajú metaznačku viewport na zlepšenie vzhľadu neresponzívnej šablóny na mobilných zariadeniach.

Príklad

Prezrite si webovú stránku Themify zo svojho mobilného zariadenia.

Ľavá snímka obrazovky zobrazuje vzhľad stránky bez použitia metaznačky zobrazovanej oblasti. Môžete si všimnúť, že stránka sa dotýka oboch strán obrazovky. Ak pridáte metaznačku zobrazovanej oblasti určujúcu šírku 1024 pixelov, vľavo a vpravo bude medzera.

Ďalší príklad

Ak je váš dizajn príliš úzky, bude tiež vyzerať neohrabane. Povedzme, že šírka kontajnera je 700px a neprispôsobí sa. V tomto prípade bude vzhľad podobný obrázku nižšie vľavo - široký biely pruh vľavo.

Problém sa dá jednoducho vyriešiť nastavením šírky výrezu na 720px. Šírka dizajnu sa nemení, no mobilné zariadenie ju zväčší na 720px.

Všeobecná chyba

Častou chybou je, že vývojári často používajú initial-scale=1 pre neresponzívne šablóny. Toto nastavenie spôsobí, že 100 % stránky sa vykreslí bez zmeny mierky. Ak dizajn nereaguje, používateľ musí buď veľa posúvať, alebo manuálne nastaviť priblíženie, aby videl celú stránku. Najhorším prípadom je kombinácia user-scalable=no alebo maximum-scale=1 s initial-scale=1 . Toto zakáže možnosť škálovania na stránke. A bez zmeny mierky nie je možné vidieť celú stránku. Ak vaša šablóna nereaguje, nedeaktivujte zmenu mierky ani neresetujte počiatočnú mierku!

Mobilné prehliadače zobrazujú stránky vo virtuálnom „okne“ (výreze), ktoré je zvyčajne širšie ako obrazovka zariadenia. Nemusia teda komprimovať rozloženie každej stránky do malého okna (čo môže rozbiť mnohé stránky, ktoré nie sú optimalizované pre mobilné zariadenia). Používatelia môžu zmeniť a priblížiť viditeľnú oblasť, aby videli rôzne časti stránky.

Mobilná verzia Safari zaviedla „metaznačku zobrazenia“, ktorá umožňuje webovým vývojárom ovládať veľkosť zobrazenia a mierku stránky. Túto značku podporuje aj mnoho iných mobilných prehliadačov, hoci nie je súčasťou žiadneho webového štandardu. Dokumentácia spoločnosti Apple dobre popisuje, ako môžu weboví vývojári používať túto značku. Museli sme však urobiť prieskum, aby sme zistili, ako presne by sa to dalo implementovať vo Fennec. Dokumentácia Safari napríklad hovorí, že obsah je „zoznam hodnôt oddelených čiarkami“, ale existujúce prehliadače a webové stránky používajú ako oddeľovače akúkoľvek kombináciu čiarok, bodkočiarok a medzier.

Viac o výrezoch v rôznych mobilných prehliadačoch sa môžete dozvedieť v A Tale of Two Viewports na quirksmode.org.

Základy výrezu

Typická webová lokalita optimalizovaná pre mobilné zariadenia obsahuje nasledujúcu metaznačku:

Vlastnosť width určuje veľkosť výrezu. Dá sa nastaviť na konkrétny počet pixelov, povedzme width=600, alebo na špeciálnu hodnotu šírky zariadenia, čo je šírka obrazovky v pixeloch CSS v 100% mierke. (Existujú aj zodpovedajúce hodnoty výšky a výšky zariadenia, ktoré môžu byť užitočné pre stránky s prvkami, ktoré menia veľkosť alebo polohu na základe výšky zobrazovanej oblasti.)

Vlastnosť initial-scale riadi úroveň priblíženia pri prvom načítaní stránky. Vlastnosti maximálnej mierky , minimálnej mierky a používateľsky škálovateľné vlastnosti určujú, ako môžu používatelia meniť mierku stránky nahor alebo nadol.

Pixel nie je pixel

V posledných rokoch sa rozlíšenie obrazovky zvýšilo na takú veľkosť, že jednotlivé pixely sú ľudským okom ťažko rozlíšiteľné. Napríklad najnovšie smartfóny majú zvyčajne 5-palcové obrazovky s rozlíšením vyšším ako 1920-1080 pixelov (~400 dpi). Z tohto dôvodu je veľa prehliadačov schopných vykresliť svoje stránky v menšej fyzickej veľkosti prekladom niekoľkých hardvérových pixelov pre každý pixel CSS. To spočiatku spôsobovalo problémy s použiteľnosťou a čitateľnosťou na mnohých webových stránkach optimalizovaných pre dotykovú obrazovku. Peter-Paul Koch písal o tomto probléme v A Pixel Is't a Pixel.

Pri vysokých rozlíšeniach obrazovky budú prehliadače efektívne škálovať stránky s počiatočnou mierkou=1. Ich text bude hladký a ostrý, ale ich bitmapové obrázky pravdepodobne nebudú využívať rozlíšenie celej obrazovky. Na získanie ostrejších obrázkov na týchto obrazovkách môžu weboví vývojári vytvárať obrázky – alebo celé rozloženia – vo väčšej mierke, než je ich konečná veľkosť, a potom ich zmenšiť pomocou CSS alebo vlastností výrezu. Toto je v súlade so špecifikáciou CSS 2.1, ktorá uvádza:

Ak je hustota pixelov výstupného zariadenia veľmi odlišná od hustoty obrazu typického počítačového displeja, používateľský agent musí škálovať hodnoty pixelov. Odporúča sa, aby blok pixelov odkazoval na celý počet pixelov zariadenia, ktoré sa najlepšie približujú referenčnému pixelu. Odporúča sa, aby referenčným pixelom bol zorný uhol jedného pixelu na zariadení s hustotou pixelov 96 dpi a vzdialenosťou na dĺžku ruky od čítačky.

Pre webových vývojárov to znamená, že veľkosť stránky je oveľa menšia ako skutočný počet pixelov a prehliadače môžu podľa toho meniť svoje rozloženie a obrázky. Pamätajte však, že nie všetky mobilné zariadenia majú rovnakú šírku; Musíte zabezpečiť, aby vaše stránky fungovali dobre pri veľkých zmenách veľkosti obrazovky a orientácie.

Predvolený pomer pixelov závisí od hustoty zobrazenia. Na displeji s hustotou menšou ako 200 dpi je pomer 1,0. Na displejoch s hustotou 200 až 300 ppi je pomer 1,5. Pre displeje s hustotou vyššou ako 300 dpi pomer predstavuje celú podlahu ( hustota/ 150 dpi). Všimnite si, že predvolený pomer platí len vtedy, keď je priblíženie výrezu 1. V opačnom prípade závisí pomer medzi pixelmi CSS a pixelmi zariadenia od aktuálnej úrovne priblíženia.

Šírka zobrazovacieho poľa a šírka obrazovky

Stránky môžu nastaviť svoju oblasť zobrazenia na konkrétnu veľkosť. Napríklad definíciu „šírka=320, počiatočná mierka=1“ možno použiť na presné prispôsobenie na malý displej telefónu v režime na výšku. To môže spôsobiť problémy, keď prehliadač nezobrazí väčšiu stránku. Ak to chcete opraviť, prehliadače v prípade potreby zväčšia šírku výrezu tak, aby vyplnil obrazovku v danej mierke. To je užitočné najmä pre zariadenia s veľkou obrazovkou, ako je iPad. (Allen Pike Selecting Viewport for iPad Sites poskytuje dobré vysvetlenie pre webových vývojárov.)

Pre stránky, ktoré špecifikujú počiatočnú alebo maximálnu mierku, to znamená, že vlastnosť width sa v skutočnosti prevedie na minimálnešírka výrezu. Napríklad, ak vaše rozloženie musí mať šírku aspoň 500 pixelov, môžete použiť nasledujúce označenie. Keď je obrazovka široká viac ako 500 pixelov, prehliadač rozšíri výrez (a nie zväčší), aby sa zmestil na obrazovku:

Ďalšie dostupné sú s minimálnou mierou , s maximálnou mierkou a používateľsky škálovateľnou . Tieto vlastnosti ovplyvňujú počiatočnú mierku a šírku a tiež obmedzujú zmeny úrovne priblíženia.

Nie všetky mobilné prehliadače zvládajú zmeny orientácie rovnakým spôsobom. Napríklad Mobile Safari často jednoducho priblíži stránku pri zmene orientácie na výšku na orientáciu na šírku namiesto toho, aby stránku rozložil tak, ako keby bola pôvodne načítaná na šírku. Ak weboví vývojári chcú, aby ich nastavenia mierky zostali pri prepínaní orientácie na iPhone rovnaké, mali by pridať hodnotu maximálnej mierky, aby sa predišlo tejto zmene mierky, ktorá má niekedy nežiaduci vedľajší účinok, ktorý bráni používateľom zmeniť mierku:

Spoločné zobrazovacie oblasti pre mobilné zariadenia a tablety

Ak chcete vedieť, ktoré mobilné a tabletové zariadenia majú šírky výrezov, tu je úplný zoznam veľkostí výrezov pre mobilné zariadenia a tablety. Poskytuje informácie, ako je šírka výrezu na výšku a na šírku, ako aj fyzická veľkosť obrazovky, operačný systém a hustota pixelov zariadenia.

technické údaje

Špecifikácia	Postavenie

Keď chceme prispôsobiť okno prehliadača na našom zariadení, zvyčajne používame značku HTML . Napodiv však meta tag nie je „normatívny“ – nie je v oficiálnom štandarde W3C.

Metaznačku viewport prvýkrát implementovala spoločnosť Apple v iPhone a neskôr aj iní predajcovia prehliadačov. Dnes je široko používaný kvôli popularite iOS, Android a ďalších platforiem pre tablety a smartfóny.

Keďže metaznačka výrezu slúži výlučne na prispôsobenie rozloženia, dá sa povedať, že ide o značku CSS. Preto sa W3C snaží štandardizovať novú adaptačnú metódu, ktorá presúva ovládanie okien z HTML do CSS.

@viewport pravidlo CSS

S novým pravidlom @viewport máme rovnaké ovládanie okna ako s metaznačkou, s tým rozdielom, že toto ovládanie sa vykonáva výlučne prostredníctvom CSS. Rovnako ako pri použití metaznačky sa odporúča nastaviť šírku okna prehliadača pomocou šírky zariadenia nezávislej od zariadenia:

@viewport (
šírka: šírka zariadenia;
}

Dnes @viewport používajú programátori pre „snap mode“ v IE10 – funkcii Windows 8, ktorá vám umožňuje pracovať v režime viacerých okien. Je zvláštne, že IE10 ignoruje metaznačku, ak je veľkosť okna menšia ako 400 pixelov, čo znemožňuje webom používajúcim metaznačku optimalizovať pre takéto malé okná. Na opravu tohto problému by programátori mali použiť parameter šírky zariadenia uvedený vyššie alebo definovať pravidlo @viewport v dopyte na médiá.

Použitie @viewport v mediálnych dopytoch

V mediálnych dopytoch môžeme použiť @viewport. Napríklad nasledujúci mediálny dotaz sa používa na úpravu rozloženia okna so šírkou menšou ako 400 pixelov (ako je režim viacerých okien v IE10) na šírku 320 pixelov.

@media obrazovka a (maximálna šírka: 400 pixelov) (
@-ms-viewport (šírka: 320px; )
...
}

V tomto príklade, ak je zariadenie nastavené na rozsah rozlíšenia 640 až 1024 pixelov, pravidlo @viewport upraví veľkosť okna na 640 pixelov.

@media screen a (min. šírka: 640px) a (max.šírka: 1024px) (
@viewport (šírka: 640px; )
...
}

Nové rukoväte @viewport

Aj keď môžeme ovládať funkciu priblíženia a priblíženia, niektoré vlastnosti výrezu - alebo "rukoväte", ako sa teraz nazývajú - sa zmenili.

priblížiť

Deskriptor priblíženia je ekvivalentom počiatočnej mierky v metaznačke. Rovnako ako minimálna a maximálna mierka, existujú deskriptory pre maximálne priblíženie a minimálne priblíženie:

@viewport (
šírka: šírka zariadenia;
zoom: 2;
}

užívateľský zoom

Deskriptor užívateľského priblíženia je ekvivalentný parametru užívateľsky škálovateľného

@viewport (
šírka: šírka zariadenia;
užívateľské priblíženie: pevné;
}

Podpora prehliadača

V súčasnosti pravidlo @viewport css podporuje iba Opera a IE10. Zdá sa, že Chrome a ďalšie prehliadače to čoskoro implementujú, pretože... Očakáva sa, že táto metaznačka sa čoskoro stane novým oficiálnym webovým štandardom.

Zatiaľ musíte k pravidlu @viewport pridať predponu dodávateľa:

@-ms-viewport (
šírka: šírka zariadenia;
}
@-o-viewport (
šírka: šírka zariadenia;
}
@viewport (
šírka: šírka zariadenia;
}

Samozrejme, stále musíme zahrnúť metaznačku zobrazovanej oblasti do stránky html, pretože... tak skoro to nikam nepôjde. Pozerať sa do budúcnosti však nie je také strašidelné – pridaním pravidla @viewport sú naše stránky a aplikácie pripravené na zmenu

Všeobecná chyba

Častou chybou je, že vývojári často používajú initial-scale=1 pre neresponzívne šablóny. Toto nastavenie spôsobí, že 100 % stránky sa vykreslí bez zmeny mierky. Ak dizajn nereaguje, používateľ musí buď veľa posúvať, alebo manuálne nastaviť priblíženie, aby videl celú stránku. Najhorším prípadom je kombinácia user-scalable=no alebo maximum-scale=1 s počiatočným-scale=1. Toto zakáže možnosť škálovania na stránke. A bez zmeny mierky nie je možné vidieť celú stránku. Ak vaša šablóna nereaguje, nedeaktivujte zmenu mierky ani neresetujte počiatočnú mierku!

Poďme vytvoriť jednoduchú stránku s minimálnymi značkami:

Ahoj svet!

Teraz otvorme túto stránku na mobilnom zariadení. Po jej otvorení uvidíme, že naša stránka sa zobrazí asi takto:

Ako vidíte, text je príliš malý na čítanie, je tam veľa prázdneho miesta a aby sme si tento text mohli prečítať, musíme si ho priblížiť.

Prečo sa to deje?

Problém s mobilnými prehliadačmi

Pri porovnaní mobilných a stolných prehliadačov je najzreteľnejší rozdiel Veľkosť obrazovky. Mobilné prehliadače štandardne zobrazujú stránky určené pre bežné prehliadače na stolných počítačoch oveľa horšie, ako by mohli: buď zmenšením mierky, príliš malým a nečitateľným textom a iným obsahom (ako v našej verzii), alebo zobrazením iba malej časti stránky, ktoré sa zmestia na obrazovku.

Ak sa nad tým zamyslíte logicky, dáva to zmysel: mobilný prehliadač vidí stránku a predpokladá, že bola vytvorená pre počítačovú verziu prehliadača, čo platí pre veľkú väčšinu stránok. Na základe toho tento prehliadač nastaví šírku stránky na 980 pixelov (Safari iPhone) a snaží sa ju optimálne prispôsobiť obrazovke smartfónu, pričom ju zobrazuje v čo najmenšej mierke. Šírka stránok je zvyčajne približne takáto, takže keď otvoríte priemernú webovú stránku na mobilnom zariadení, roztiahne sa na celú šírku, ale je 2-3 krát menšia ako jej pôvodná veľkosť.

Ak teda chceme optimalizovať stránku pre smartfóny, táto možnosť nefunguje. Musíme prehliadaču nejako povedať, že naša stránka je určená na zobrazovanie na mobilných zariadeniach a nastaviť pravidlá pre správne správanie sa výrezu.

A to je presne dôvod, prečo budeme používať meta tag výrez, ktorý predstavil Apple a ako inak skopírovali ďalší.

Pridať do bloku nasledujúci riadok:

A v dôsledku toho sa stane toto:

Je to úplne iná vec. Nastavením metaznačky zobrazovanej oblasti na "šírka zariadenia", hovoríme prehliadaču, že šírka zobrazovanej oblasti je šírka daného zariadenia a nie štandardná šírka 980 pixelov, ktorú by mohol predpokladať predvolene. Na veľkom počte smartfónov je šírka obrazovky 320 pixelov (v režime na výšku). Šírku si môžete sami nastaviť na 320px, čo poskytne rovnaký výsledok, ale na niektorých smartfónoch môže byť šírka obrazovky iná, takže najlepšou možnosťou je použiť šírku zariadenia.

Jednou z najbežnejších možností na definovanie výrezu je nasledujúca možnosť:

ktorý definuje šírku stránky a nastavuje počiatočnú mierku.

Tiež často nájdete túto možnosť:

V tomto prípade je stránka nastavená na šírku zariadenia, na ktorom je otvorená, a akékoľvek škálovanie je zakázané – počiatočné pri načítaní aj vlastné škálovanie po načítaní. V tomto režime funguje mobilná webová stránka ako mobilná aplikácia, kde sa používateľ môže posúvať iba vertikálne alebo horizontálne. Takýto vstup je však lepšie nepoužívať naslepo, pretože užívateľovi nemožno zakázať ľubovoľné oddialenie a priblíženie, pokiaľ si to nápad dizajnu nevyžaduje. Napríklad príliš malé písmo zhoršuje čitateľnosť textu a v tomto prípade je potrebné použiť aproximáciu.

Metaznačka viewport je relatívne nová, takže ju momentálne nepodporujú všetky prehliadače, najmä staršie modely smartfónov. V takýchto prípadoch má zmysel použiť niektoré staré metódy, ktoré umožňujú prehliadaču identifikovať stránku ako optimalizovanú pre mobilný web. Môžete to urobiť pomocou nasledujúcich metaznačiek:

Môžete si prečítať viac o týchto a ďalších špecifických mobilných značkách.

Možné možnosti pre metaznačku výrezu

Atribút	Možný význam	Popis
šírka	(od 200 do 10 000 pixelov) alebo konštanta šírky zariadenia.	Definuje šírku výrezu. Ak šírka nie je špecifikovaná, hodnota je nastavená na 980 pixelov v mobilnom Safari, 850 pixelov v Opere, 800 pixelov v Android WebKit a 974 pixelov v IE.
výška	Nezáporná celočíselná hodnota (od 223 pixelov do 10 000 pixelov) alebo konštantná výška zariadenia	Definuje výšku výrezu. Vo väčšine prípadov možno tento atribút ignorovať
počiatočná mierka	Hodnota 1,0 – neškálovať	Definuje počiatočnú mierku strany. Čím vyššie číslo, tým vyššia mierka.
užívateľsky škálovateľné	nie alebo áno	Určuje, či používateľ môže priblížiť okno. Predvolená hodnota je „áno“ v mobilnom Safari.
minimálna mierka	Číslo s bodkou (od 0,1 do 10). 1,0 - neškálovať	Definuje minimálnu mierku výrezu. Predvolená hodnota je „0,25“ v mobilnom Safari.
maximálna mierka	Číslo s bodkou (od 0,1 do 10). 1,0 - neškálovať	Definuje maximálne priblíženie výrezu. Predvolená hodnota je „1,6“ v mobilnom Safari.

Tabuľka kompatibility zobrazenia.

Dva pohľady

Povedzme teda, že zobrazovaná oblasť je pre našu šablónu CSS príliš úzka. Jednoznačným riešením je rozšírenie výrezu. Najprv však rozdeľme koncept výrezu na dve časti: vizuálny výrez a výrez stránky.

Koncept výrezov veľmi dobre vysvetľuje George Cummins na Stack Overflow:

Predstavte si výrez stránky ako veľký obrázok s konštantnou veľkosťou a tvarom. Teraz si predstavte menší rám, cez ktorý sa pozeráte na tento veľký obrázok. Tento rám je obklopený nepriehľadným materiálom, ktorý vám bráni vidieť celý veľký obrázok okrem jeho častí. Časť veľkého obrázka, ktorá je viditeľná cez rám, bude vizuálnym výrezom. Ak sa vzdialite od veľkého obrázka s rámom (oddialite, t. j. zmenšíte mierku), môžete vidieť celý obrázok naraz alebo sa priblížiť (priblížiť, zväčšiť mierku), potom môžete vidieť iba časť obrázok. Rám môžete tiež otáčať, aby ste zmenili jeho orientáciu (na výšku alebo na šírku), pričom veľkosť a tvar veľkého obrázka (výrez strany) zostáva vždy nezmenený.

Vizuálny výrez- časť stránky, ktorá je momentálne viditeľná na obrazovke. Používateľ môže rolovaním zmeniť viditeľnú časť stránky alebo použiť zoom na zmenu veľkosti vizuálneho výrezu.

Rozloženie stránky, najmä ak je jej šírka určená v percentách, sa vypočítava vzhľadom na výrez stránky, ktorý je výrazne širší ako vizuálny výrez.

Prvok -prvok teda na začiatku zaberá šírku zobrazovanej oblasti stránky a potom sa CSS správa tak, ako keby bola obrazovka oveľa širšia ako obrazovka telefónu. To poskytuje stránke rovnaké správanie ako v prehliadači pre stolné počítače.

Aký široký je samotný vizuálny výrez? Závisí to od prehliadača. Safari iPhone používa 980px, Opera používa 850px, Android WebKit používa 800px a IE používa 974px.

Niektoré prehliadače sa správajú odlišne:

Symbian WebKit sa snaží prirovnať zobrazenú oblasť stránky k vizuálnej oblasti, čo znamená, že prvky s percentuálnou šírkou sa môžu správať nepredvídateľne. Ak sa však stránka nezmestí do vizuálneho výrezu kvôli absolútnym hodnotám, prehliadač roztiahne výrez stránky na maximálne 850 pixelov.

Samsung WebKit robí zobrazenú oblasť stránky rovnakou šírkou ako najširší prvok.

Na zariadení BlackBerry so stupnicou 100 % bude zobrazená oblasť stránky v každom prípade rovnaká ako vizuálna oblasť.

Približovanie

Obe zobrazované oblasti sú merané v pixeloch CSS. Počas zmeny mierky sa však rozmery vizuálnej výrezu menia (pri približovaní sa na obrazovku zmestí menej pixelov CSS), zatiaľ čo rozmery výrezu stránky zostávajú nezmenené. (Ak by to tak nebolo, prehliadač by neustále preformátoval stránku kvôli prepočítavaniu percentuálnej šírky.)

Pochopenie zobrazovanej oblasti stránky

Ak chcete lepšie porozumieť veľkosti zobrazovanej oblasti stránky, mali by ste sa pozrieť na to, čo sa stane pri najmenšej možnej mierke stránky. Väčšina mobilných prehliadačov štandardne zobrazuje akúkoľvek stránku v najmenšej mierke.

Faktom je, že rozmery výrezu stránky prehliadača sa úplne zhodujú s obrazovkou v maximálnej zmenšenej mierke, a preto sa rovnajú vizuálnej výreze.

Šírka a výška výrezu stránky sa teda rovná všetkému, čo je zobrazené na obrazovke v najmenšej mierke. Keď používateľ priblíži, tieto rozmery zostanú nezmenené.

Šírka výrezu stránky je vždy rovnaká. Ak zmeníte orientáciu obrazovky smartfónu, zmení sa vizuálny výrez, no zároveň sa aj mobilný prehliadač prispôsobí novej orientácii miernym priblížením, takže výrez stránky bude mať opäť rovnakú šírku ako vizuálny výrez.

To ovplyvnilo výšku zobrazenej oblasti stránky, ktorá je teraz oveľa menšia ako pri orientácii na výšku. Ale pre vývojárov je šírka dôležitejšia ako výška.

Android a cieľová hustotadpi

Zariadenia so systémom Android majú svoj vlastný atribút výrezu, ktorý zakazuje zmenu mierky pre displeje s rôznym rozlíšením.

Na zariadeniach s HDPI (240 dpi) nebude škálovanie.

Táto položka znamená, že na žiadnom zariadení so systémom Android nedôjde k žiadnemu škálovaniu.

Som si istý, že veľa ľudí používa metaznačku Viewport na zmenu dizajnu, ale vedeli ste, že táto značka môže byť veľmi užitočná aj pre mobilné zariadenia? Ak nemáte čas na konverziu projektu, mali by ste si prečítať tento článok o tom, ako použiť značku Viewport na zlepšenie vzhľadu vášho projektu na mobilných zariadeniach.

Hlavné použitie značky zobrazenia

Metaznačka Viewport sa zvyčajne používa na zmenu veľkosti dizajnu na nastavenie šírky a výšky okna na mobilných zariadeniach. Nižšie je uvedený príklad značky Viewport.

< meta name = "viewport" content = "width=device-width, initial-scale=1.0">

Používanie značky Viewport pre stránky, ktoré nie sú určené pre mobilné zariadenia.

Ako viete, predvolená šírka výrezu na iPhone je 980 pixelov. Váš dizajn však nemusí zapadať do tohto rozsahu. Môže byť širší alebo užší. Nižšie sú uvedené dva príklady, kde môžete tieto značky použiť na zlepšenie zobrazenia svojich stránok na mobilných zariadeniach.

Príklad

Snímka obrazovky vľavo ukazuje, ako bude stránka vyzerať bez značky. Ako vidíte, stránka sa dotýka oboch strán. Správca webu pridal značku Viewport na nastavenie šírky okna na 1024 pixelov, takže na ľavej a pravej strane ponechal priestor navyše.

< meta name = "viewport" content = "width=1024" >

Ďalší príklad.

Ak je váš projekt príliš úzky, môže to tiež spôsobiť problémy. Povedzme, že šírka vášho dizajnového kontajnera je 700 pixelov a to nie je správne, bude to vyzerať ako na snímke obrazovky vľavo, kde je vpravo veľký prázdny priestor.

Môžete to jednoducho opraviť nastavením šírky okna na 720 pixelov. Šírka vášho dizajnu sa nemení, ale iPhone sa prispôsobí veľkosti 720 pixelov.

< meta name = "viewport" content = "width=720" >

Bežná chyba

Častou chybou je, že ľudia často pridávajú počiatočné - mierka = 1 pre dizajny mimo veľkosti. Toto vykreslí stránku v 100% mierke bez zmeny mierky. Ak sa váš projekt nezmestí na obrazovku, používatelia ho budú musieť oddialiť, aby videli celú stránku. Ešte horšie je, keď sa spoja užívateľ - škálovateľný = nie alebo maximum - mierka = 1 s počiatočné - mierka = 1. Tým sa deaktivuje možnosť priblíženia. Používatelia nemajú možnosť zmenšiť veľkosť stránky, aby ju mohli zobraziť.

Môže byť užitočné prečítať si: