Laba diena, o tiksliau nakties, mieli draugai. Vos prieš kelias minutes prie šablono pridėjau keletą maudymosi kelnaičių. Šablonas buvo neadaptyvus ir problema buvo jo struktūroje, slėpė dalį turinio (to buvo poreikis), o įeinant iš mobiliosios naršyklės (iš telefono ar planšetinio kompiuterio) tiek turinį, tiek gabalą puslapio buvo nupjauti. Bandžiau ištaisyti šį nesusipratimą ir per „lauko bandymus praktikoje“ tai supratau geriausias sprendimas yra peržiūros srities metažymos naudojimas.
Žyma skirta teisingam svetainės masteliui nustatyti įvairių įrenginių, pavyzdžiui, įrenginiuose, kurių ekrano skiriamoji geba yra mažesnė nei būtina. Dažnai naudokite žymą adaptyvūs šablonai, tačiau tik nedaugelis žino, kad tai gali būti naudinga įprastuose nereaguojančiame dizaine.
Pažvelkime į galimas žymos naudojimo taisykles:
1. Plotis
Tuo nurodome sveikąjį skaičių pikseliais (nuo 200 pikselių iki 10 000 pikselių) arba "įrenginio plotis". Tai nustato peržiūros srities plotį, jei plotis nenurodytas jums, tada jis paimamas automatiškai:
- 980 pikselių – mobiliesiems „Safari“.
- 850 pikselių – Opera
- 800 pikselių – „Android WebKit“.
- 974 pikseliai – IE
2.Aukštis
Veikia tuo pačiu principu kaip plotis. Tačiau dažnai 99% atvejų jis tiesiog nenaudojamas, todėl negalite jo atskleisti, jei nežinote, ar jums to reikia, ar ne. Bet kokiu atveju galite eksperimentuoti...
3. Pradinis mastas
Šis parametras nustato puslapio mastelį. Čia viskas elementaru, didink vertę – padidink mastelį. Galimos šios vertės nuo 0,1 iki 10. Jei nustatysite 1,0, nurodysime, kad puslapio mastelis nėra pakeistas.
4. Vartotojo keičiamas
Nurodo, ar galima keisti puslapio mastelį. Gali paveldėti vertybes taip arba ne. „Safari“ naršyklėje numatytoji reikšmė yra taip,
5. Minimalus dydis ir maksimalaus masto
Šios parinktys apibrėžia mažiausią ir didžiausią leistiną peržiūros srities metažymos skalę. Galimos jo reikšmės yra nuo 0,1 iki 10. Jei nustatysite 1,0, naršyklei pranešime, kad ji nekeičia puslapio mastelio. Mobiliojoje naršyklėje „Safari“ nustatyta minimali skalė = "0,25" ir didžiausia skalė = "1,6".
Dabar pereikime prie naudojimo atvejų.
Paprastai peržiūros srities metažyma naudojama norint nustatyti svetainės peržiūros srities plotį ir pradinį mastelį mobiliuosiuose įrenginiuose, pavyzdžiui:
Lygiai taip pat galite sekti tuo pačiu pavyzdžiu, jei jūsų turinys nėra platus (jo nenupjauna naršyklė), o siauras (kažkur atsiranda tuščia vieta):
Tipiška klaida, kurią galite padaryti naudodami peržiūros srities metažymą, yra ta, kad naudosite vertę pradinė skalė = 1 nereaguojantiems šablonams. Kas negerai? Negerai yra tai, kad dėl šio nustatymo 100 % puslapio bus pateikta be mastelio. Taigi, vartotojas turės pats nustatyti mastelį arba ilgą laiką slinkti puslapį.
Klaida taip pat gali būti dalijimasis parametrus user-scalable=ne arba didžiausia skalė = 1 kartu su pradinė skalė = 1. Tai išjungs galimybę keisti mastelį svetainėje (įjungta mobilieji šablonaiŠi funkcija tikrai gali praversti, bet vargu ar...). Kadangi išjungsime mastelio keitimą, neturėsime galimybės matyti viso puslapio.
Asmeniškai galiu jums rekomenduoti tik vieną. Jei jūsų šablonas nepritaikomas mobiliesiems ir kitiems įrenginiams, ekrano dydžiai skiriasi nuo tų, kuriuos taikėte, palikite galimybę keisti mastelį ir nekeiskite mastelio dydžio.
Kai kurie žmonės mano, kad slinkti kairėn arba dešinėn yra labai blogai ir negražu. Žinoma, tai nėra blogai, mano nuomone, tai gana nepatogu, bet kartais to reikia. Pavyzdžiui, mano klientas turi svetainę. Ji turi pilną ir mobiliąją versiją, kiekviena iš šių versijų yra skirtingi šablonai. Atitinkamai, darbalaukio šablone nėra prasmės daryti jokių sudėtingų pritaikymų ir skambučių bei švilpukų telefonams, pakanka peržiūros srities žymos, tačiau mobiliajame telefone, taip, viskas skirta telefonams. Čia kažkam bus patogiau naudotis, 2 alternatyvos, taip sakant... Ačiū visiems, sėkmės!
Paskutinis atnaujinimas: 2016-03-05
Pirmiausia pažvelkime į vieną iš pagrindinių taikymo punktų prisitaikantis dizainas- peržiūros srities metažyma (iš tikrųjų adaptyvus dizainas prasideda šia žyma). Pradėkime nuo šio tinklalapio:
Įprastas tinklalapis
Tai yra standartinis tinklalapis, kuris įprastoje naršyklėje atrodytų taip:
Tačiau jei tą patį tinklalapį paleisime mobiliojo įrenginio emuliatoriuje arba realiame mobilusis įrenginys, tada vargu ar galime perskaityti, kas ant jo parašyta:
Pritaikius mastelio keitimą, vartotojas pagaliau gali pamatyti, kas ten parašyta. Tačiau tai nėra labai patogu. Tuo pačiu tinklalapyje yra daug tuščios vietos, o tai nėra labai gražu.
Kodėl tai vyksta? Faktas yra tas, kad kiekviena mobiliojo telefono naršyklė nustato tam tikrus pradinius puslapio dydžius ir bando juos pritaikyti prie dabartinio mobiliojo įrenginio ekrano dydžių.
Visa matoma sritis naršyklės ekrane apibūdinama koncepcija Viewport . Iš esmės peržiūros sritis yra sritis, kurią žiniatinklio naršyklė bando tilpti į tinklalapį. Pavyzdžiui, „iPhone“ ir „iPod“ „Safari“ naršyklėje numatytasis peržiūros srities plotis yra 980 pikselių. Tai yra, gavusi puslapį ir įvedusi jį į 980 pikselių pločio peržiūros sritį, naršyklė suspaudžia jį iki mobiliojo įrenginio dydžio. Pavyzdžiui, jei išmaniojo telefono ekrano plotis yra 320 pikselių, tada puslapis bus suspaustas iki tokio dydžio. Ir visiems puslapio elementams bus pritaikytas mastelio koeficientas 320/980.
Kodėl šiuo atveju naudojama 980 pikselių, o, tarkime, ne tikrasis ekrano dydis? Reikalas tas, kad pagal numatytuosius nustatymus naršyklė mano, kad kiekvienas tinklalapis yra skirtas staliniams kompiuteriams. O įprastas darbalaukio svetainės plotis gali būti laikomas 980 pikselių.
Tokiu atveju kiekviena naršyklė nustato savo peržiūros srities plotį, pasirinktinai 980 pikselių. Kitos naršyklės gali palaikyti skirtingas pradinio pločio reikšmes. Tačiau jie taip pat atliks mastelio keitimą.
Kad išvengtumėte šio nelabai malonaus vaizdo, turėtumėte naudoti peržiūros srities metažymą. Jis turi tokį apibrėžimą:
Metažymos turinio atribute galime apibrėžti šiuos parametrus:
Parametras | Vertybės | apibūdinimas |
Priima sveikojo skaičiaus reikšmę pikseliais arba įrenginio pločio reikšmę | Nustatomas peržiūros srities plotis |
|
Priima sveikojo skaičiaus reikšmę pikseliais arba įrenginio aukščio reikšmę | Nustato peržiūros srities aukštį |
|
Nurodo pradinio peržiūros srities dydžio mastelio koeficientą. 1,0 reikšmė nenurodo mastelio keitimo |
||
Nurodoma, ar vartotojas gali naudoti gestus, kad padidintų puslapio mastelį |
||
Slankaus kablelio skaičius nuo 0,1 ir didesnis | Nustato mažiausią peržiūros srities dydžio skalę. 1,0 reikšmė nenurodo mastelio keitimo |
|
Slankaus kablelio skaičius nuo 0,1 ir didesnis | Nustato didžiausią peržiūros srities dydžio skalę. 1,0 reikšmė nenurodo mastelio keitimo |
Dabar pakeiskime ankstesnį tinklalapio pavyzdį naudodami metažymą:
Įprastas tinklalapis
Tinklalapis tikrai atrodo geriau, nes naudojama peržiūros srities metažyma. Naudodami parametrą width=device-width, žiniatinklio naršyklei nurodome, kad pradinis peržiūros srities plotis turi būti ne 980 pikselių ar koks nors kitas skaičius, o tikrasis įrenginio ekrano plotis. Taigi žiniatinklio naršyklė nedarys jokio mastelio, nes turime tą patį peržiūros srities plotį ir plotį.
Taip pat galime naudoti kitas parinktis, pvz., neleisti vartotojui keisti puslapio matmenų:
Taip atsitiko, kad mobiliosios naršyklės pasirodė palyginti neseniai, o tuo metu tinkle jau buvo svetainių puiki suma. Natūralu, kad visos šios svetainės visiškai nebuvo optimizuotos mažiems išmaniųjų telefonų ekranams, o išmanieji telefonai, savo ruožtu, buvo priversti manyti, kad visos svetainės yra maždaug 1000 pikselių pločio (980 pikselių Safari). Reikėjo kažkaip išspręsti esamą situaciją ir Apple sugalvojo meta žymą , kurią, pagal tradiciją, vėliau pavogė visi kiti naršyklių gamintojai.
Pažvelkime į tipišką epinį svetainės išdėstymą:
html
Labas pasauli
Atidarykime jį mobiliojoje naršyklėje. Štai ką pamatysime:
Kaip teisingai nurodėte, tekstas per mažas ir taip atsitiko todėl, kad „safari“ bandė pritaikyti mūsų svetainę (kuri, manoma, yra skirta naršyklėms, kurių ekrano plotis yra apie 980 pikselių).
Dabar pasakykime naršyklei, kad mūsų svetainė reaguoja į bet kokį ekrano plotį.
html
Kas nutiko:
Na, dabar viskas daug geriau. Pažymėdami width=device-width , naršyklei pasakėme, kad norime, kad turinio peržiūros sritis būtų lygi mobiliojo įrenginio ekrano pločiui.
Galite rankiniu būdu nustatyti pločio reikšmę. Pavyzdžiui, content="width=320px" , bet tai nerekomenduojama, nes skirtingi išmanieji telefonai gali turėti visiškai skirtingą ekrano plotį.
Labai dažnas variantas yra:
html
ši parinktis nustato puslapio plotį ir pradinį mastelį (šiuo atveju nekeičiant mastelio)
Taip pat dažnai naudojamas:
html
Tokios reikšmės naudojamos, jei svetainė bus naudojama ir veiks kaip mobilioji programėlė. Tie
- kai puslapis įkeliamas, jo mastelis nebus keičiamas
- puslapis užims visą mobiliosios naršyklės plotį
- bet koks pritaikytas mastelio keitimas yra draudžiamas
- galimas tik horizontalus ir vertikalus slinkimas
Naudokite šią konfigūraciją tik tada, kai žinote, ką darote.
Pažvelkime į galiojančius parametrus ir jų vertes, pasiekiamas peržiūros srities metažymoje.
plotis
Sveikasis skaičius (nuo 200 iki 10 000 taškų) arba „įrenginio plotis“.
Nustatomas peržiūros srities plotis. Jei peržiūros sritis nirina nenurodyta, tada:
- mobiliajam safariui jis yra 980 pikselių
- Opera – 850px
- Android WebKit – 800 pikselių
- IE – 974px
aukščio
Sveikasis skaičius (nuo 223 iki 10 000 taškų) arba „įrenginio aukštis“
nustato peržiūros srities aukštį. 99% atvejų tiesiog nepaisykite šio parametro, bet jei jums jo tikrai reikia, pabandykite ir eksperimentuokite. Sėkmės..
pradinis mastelis
1.0 – nekeičiama mastelio. Nustato puslapio mastelį. Padidinkite vertę – padidinkite skalę.
vartotojas keičiasi
Galimos reikšmės yra ne arba taip
Nurodo, ar galima keisti puslapio mastelį. Pagal nutylėjimą „Safari“ yra „taip“.
minimalus ir maksimalus mastelis
Galimos reikšmės (nuo 0,1 iki 10).
1.0 – nekeičiama mastelio. Nurodo atitinkamai mažiausią ir didžiausią peržiūros srities skalę.
Numatytasis „Safari“ mobiliesiems dydis yra minimalus skalė = "0,25" , didžiausia skalė = "1,6".
Patarimas: Nenaudokite metažymų (įskaitant šią), kol nesuprasite, kodėl viso to reikia. Ir išbandyk viską kitaip mobiliosios naršyklės. Sėkmės!
Sveiki visi, šiandien kalbėsime apie kas yra peržiūros sritis ir kaip juo naudotis.
Norint suprasti, kas tai yra, jums reikia kokio nors mobiliojo įrenginio. Dabar sukurkime paprastą html puslapis toks:
bandomasis postas
tai yra bandomasis įrašas
kitas įrašas
tai gana šaunu
naujas įrašas
Dabar atidarykime savo puslapį mobiliajame įrenginyje ir ką pamatysime? Ir pamatysime, kad tekstas per mažas ir sunkiai skaitomas. Tačiau jei prie žymos pridėsime šią turinio žymą galva
Dabar tekstas atrodo gerai. Štai piešinys. Kairėje be etiketės, o dešinėje su ja
Kodėl tai vyksta? Faktas yra tas, kad numatytoji naršyklė mano, kad svetainė sukurta naršyklės darbalaukio versijai, ir bando ją visiškai pritaikyti jūsų išmaniojo telefono lange. Nustatydami žymą telefono naršyklei pasakome, kad peržiūros plotis yra lygus išmaniojo telefono pločiui. Štai tokia paprasta žyma, bet kuriant labai padeda mobilioji versija svetainę.
Taip pat galite nustatyti skalę. Tam jis naudojamas pradinis mastelis
Jei norite neleisti vartotojui keisti puslapio mastelio savo išmaniajame telefone, galite parašyti taip:
Tačiau reikia būti atsargiems, nes. pasitaiko, kad tekstas gan sunkiai skaitomas ir tenka jį padidinti, bet jei tai draudžiama, sukelsite nepatogumų vartotojui.
Naršyklės palaikymas
„Android“ palaikymas, bet iki versijos 2.2 . pradinė skalė yra 1.0
Symbian, Nokia 40 series, Motorola, Opera mobile/mini ir NetFront ne parama
IE palaiko su 6 versijos
„BlackBerry“ palaiko nuo versijos 4.2.1
Kaip matote, palaikymas vis dar nebaigtas, tačiau jau galite naudoti šią žymą, nes. dauguma naujų išmaniųjų telefonų tai jau supranta.
Taigi, šis straipsnis baigiamas, ačiū, kad skaitėte.
→ CSS įrenginio pritaikymas per @viewportKai norime tinkinti savo įrenginio naršyklės langą, dažniausiai naudojame HTML žyma . Tačiau, kaip bebūtų keista, metažyma nėra „normatyvi“ – jos nėra oficialiame W3C standarte.
Pirmą kartą buvo įdiegta peržiūros srities metažyma pateikė Apple„iPhone“ ir kitų naršyklių pardavėjų. Šiandien jis plačiai naudojamas dėl iOS, Android ir kitų planšetiniams kompiuteriams ir išmaniesiems telefonams skirtų platformų populiarumo.
Kadangi peržiūros srities metažyma skirta tik žymėjimui tinkinti, galime pasakyti, kad ji teisėtai priklauso CSS. Štai kodėl W3C siekia standartizuoti naujas metodas adaptacija, kurioje lango valdymas perkeliamas iš HTML į CSS.
@viewport css taisyklė
Naudodami naują @viewport taisyklę turime tą patį lango valdymą kaip ir metažymą, išskyrus tai, kad toks valdymas atliekamas tik per CSS. Kaip ir naudojant metažymą, naršyklės lango plotį rekomenduojama nustatyti naudojant nuo įrenginio nepriklausomą įrenginio plotį:
@viewport (plotis: įrenginio plotis; )
Šiandien „@viewport“ programuotojai naudoja „snap mode“ IE10 − windows funkcija 8, leidžiantis dirbti kelių langų režimu. Kaip bebūtų keista, IE10 nepaiso metažymos, jei lango dydis yra mažesnis nei 400 pikselių, todėl šią metažymą naudojančios svetainės negali optimizuoti tokių mažų langų. Norėdami tai išspręsti, programuotojai turėtų naudoti anksčiau minėtą įrenginio pločio parametrą arba medijos užklausoje apibrėžti @viewport taisyklę.
@viewport naudojimas medijos užklausose
Žiniasklaidos užklausose galime naudoti @viewport. Pavyzdžiui, ši medijos užklausa naudojama mažesnio nei 400 pikselių lango išdėstymui nustatyti (pvz., kelių langų režimas IE10) iki 320 pikselių pločio.
@medijos ekranas ir (maks. plotis: 400 piks.) @-ms-peržiūros sritis (plotis: 320 piks.; ) ... )
AT šis pavyzdys, jei įrenginio skyros diapazonas yra nuo 640 iki 1024 pikselių, @viewport taisyklė langą padidina iki 640 pikselių.
@medijos ekranas ir (min. plotis: 640 piks.) ir (maks. plotis: 1024 piks.) ( @žiūros sritis (plotis: 640 piks.; ) ... )
Naujos @viewport rankenos
Nors galime valdyti mastelio keitimo ir mastelio keitimo funkcijas, kai kurios peržiūros srities ypatybės – arba kaip dabar vadinamos „rankenomis“ – pasikeitė.
priartinti
Mastelio keitimo deskriptorius yra metažymos pradinės skalės atitikmuo. Be minimalaus mastelio ir didžiausio mastelio , yra didžiausio mastelio ir minimalaus mastelio deskriptoriai:
@viewport ( plotis: įrenginio plotis; mastelio keitimas: 2; )
vartotojo priartinimas
Vartotojo mastelio deskriptorius atitinka vartotojo keičiamo dydžio parametrą
@viewport ( plotis: įrenginio plotis; vartotojo mastelio keitimas: fiksuotas; )
Naršyklės palaikymas
Nuo šiandien @viewport css taisyklę palaiko tik Opera ir IE10. Panašu, kad greitai jį įdiegs ir „Chrome“ bei kitos naršyklės. Tikimasi, kad ši metažyma netrukus taps naujuoju oficialiu žiniatinklio standartu.
Kol kas prie @viewport taisyklės turite pridėti pardavėjo priešdėlį:
@-ms-viewport ( plotis: įrenginio plotis; ) @-o-viewport ( plotis: įrenginio plotis; ) @viewport ( plotis: įrenginio plotis; )
Žinoma, vis tiek turime įtraukti peržiūros srities metažymą html puslapį, nes jis greitu metu niekur neis. Tačiau žiūrėti į ateitį nebėra taip baisu – pridėjus @viewport taisyklę mūsų svetainės ir programos taps palankios ateičiai.