Zgjatja më e popullarizuar e ekranit. Zgjidhja e ekranit të Smartphone: çfarë të zgjedhësh
Përshëndetje për ju, vizitorë të rastësishëm dhe lexues të rregullt të faqes së blogut!
Disa kohë më parë kam përditësuar blogun tim, duke krijuar një temë krejtësisht të re për wordpress nga e para. Për mënyrën se si ka ndodhur kjo, kam shkruar në artikullin "". Një nga detyrat kryesore kur krijohet një model i ri është një paraqitje adaptive e faqes për të gjitha zgjidhjet e ekranit.
Një përmbledhje e shkurtër e artikullit:
Prandaj, për të siguruar mbijetesën në botën digjitale, adaptimi dhe evolucioni janë fjalët kyçe. Prandaj, çdo përditësim i ri gjithnjë e më shumë komplikon jetën e profesionistëve në fushën e zhvillimit dhe të projektimit. Si i vlerësoni të gjitha këto detaje pa pasur nevojë të lëshoni versione të shumta të të njëjtit website për të plotësuar nevojat e kaq shumë opsione?
Po, ka zgjidhje: dizajn i përgjegjshëm dhe dizajn i përgjegjshëm. Këto dy bukuri i lejojnë zhvilluesit dhe web designuesit të përshtatin të njëjtën paraqitjen për lloje të ndryshme të pajisjeve, pavarësisht nëse ato janë të lëvizshme apo jo, ato punojnë mirë ekranet e ndryshme dhe lejet.
Në artikullin e mëparshëm kam shkruar tashmë për këtë, dhe pse është e nevojshme. Por si ta arrijmë këtë përshtatshmëri?
Për këtë nuk ka mënyra të ndryshme. Dikush përdor javascript, dikush tjetër. Por unë mendoj se mënyra më e lehtë dhe e drejtë është adaptive me CSS.
Si të bëni faqosje të përgjegjshme të faqeve të internetit
Së pari,
nëse keni marrë për të imponuar një dizajn të përgjegjshëm të faqes, midis etiketave
Megjithatë, ka shumë konfuzion midis këtyre termave: kur duhet të përdoret? Ata të dy kanë një shumë të përbashkët, dhe kjo rrëmujë e tërë është normale, ju e dini? Fleksibiliteti është fjala që përcakton më së miri dizajnin e përgjegjshëm. Përdoruesi mund të lundrojë me një dizajn të optimizuar pavarësisht nga madhësia ose rezolucioni i ekranit. Shtrirja ndryshohet në përputhje me pajisjen për të cilën përdoruesi i referohet. Për shkak të kësaj baze fleksibël, mund të bëni ndryshime serioze me disa rreshta të kodit dhe të fshehni elemente të panevojshme pajisje të lëvizshme.
Çfarë budalla isha që nuk e bëra menjëherë kur u përpoqa të bëja një skicë adaptive të faqes !!!
Problemi i shfletuesve mobil në faqen e tyre të shkallëzuar të faqes, madje edhe adaptive.
Imagjinoni, unë vizatoj një dizajn, pastaj i regjistroj të gjitha stilet dhe kërkesat e nevojshme, kontrolloj përshtatshmërinë e faqes në rezolucione të ndryshme. Çdo gjë duket të jetë e mirë! Por kur e hap blogun tim në një smartphone, unë shoh se faqja thjesht u tkurr. Ai nuk u pajtua me pajisjen celulare, por thjesht reduktoi madhësinë e shkronjave, fotove, etj.
Ne nuk do të hyjmë në detaje në këtë artikull, sepse tashmë kemi publikuar një libër të plotë për këtë temë. Pra, për të mësuar më shumë, bëjeni tani! Qëllimi i dizajn të përgjegjshëm - të bëjë disa përshtatje pa braktisur masat fikse. Tekstet dhe imazhet nuk marrin trajtim të diferencuar, ato janë të zhvilluara në bazë të planit dhe kodit të njëjtë që janë të dizajnuara për kompjuterët desktop. Avantazhi është se koha e prodhimit është më e shkurtër, paraqitja ekzistuese mund të përmirësohet dhe programuesi ka më shumë kontroll mbi ndryshimet në dizajn.
Si është kështu? Fillova të rishikoj të gjitha stilet, nëse i regjistrova klasat në mënyrë korrekte, më në fund mora vesh që përmes javascript e kontrollova gjerësinë e dritares së shfletuesit në px. Unë u trondita. Kur kontrolluar në një kompjuter portativ, kam marrë rezultatin prej 1024px, dhe për të njëjtin rezultat që kam marrë duke hapur faqen në smartphone!
Por kjo nuk mund të jetë!
Rezulton nëse nuk e regjistroni kodin që përmenda më sipër, shfletuesi i celularit nuk e kupton që faqja është adaptive dhe përpiqet thjesht të zvogëlojë faqen e faqes në mënyrë që të përshtatet në ekranin e vogël të telefonit celular.
Zhvillimi i përmbajtjes duhet të jetë i rëndësishëm për secilin rast, duke qenë një bashkëpunim midis një programuesi dhe një dizajner. Ajo që me të vërtetë ka rëndësi është përcaktimi i nevojave të përdoruesve në çdo pajisje, qoftë mobile apo desktop, si dhe përmirësimi i qasjes.
Epo, çfarë dreqin po bëhet një tallje? Përbëhet nga të gjitha elementet që shfaqen kur hyjnë në një faqe interneti: lokacioni, forma, ngjyra, fonts etj. Për shembull, nëse e lexoni këtë mësim në një faqe, paraqitja është e gjitha që shfaqet në shfletuesin tuaj: logo, menynë, header, përmbajtjen dhe footer.
Për shkak të marrëzisë dhe paaftësisë sime, kam humbur shumë kohë. Por tani mbaj mend përgjithmonë))).
Shtrirja adaptive e kërkesave të mediave CSS
Për ta bërë atë të përgjegjshëm me CSS, ju duhet të përdorni pyetje mediale.
Çfarë është? Po, shumë e thjeshtë. Në dosjen CSS ju duhet të regjistroni kërkesat si:
Ekrani @media dhe (min-width: 1440px) dhe (max-width: 1599px) ()
Shtrirja është gjithçka që shihni dhe çfarë dizajner web ka krijuar. Para se të duam të flasim për madhësinë e paraqitjes, duhet të flasim shpejt për zgjidhjen e ekranit. Rezolucioni i ekranit është numri i pikselëve individualë që mund të shfaqen në hapësirën e dukshme të monitorit. Rezolucioni zakonisht shfaqet si gjerësia e lartësisë së lartësisë dhe njësia - në pixels.
Monitorimi mund të ketë rezoluta të ndryshme pavarësisht nga madhësia fizike e saj: një monitor 27-inç mund të ketë një rezolucion të ulët ose të lartë. Rezolucioni maksimal i çdo ekrani vendoset nga monitori dhe karta video e kompjuterit të përdoruesit. Sa më i madh rezolucioni, aq më i vogël është madhësia e pikselit dhe aq më i lartë cilësia e imazhit të shfaqur.
Ky kod do të thotë që stilet e mbyllura midis "()" do të punojnë për ekranet me një gjerësi minimale prej 1440px dhe një maksimumi prej 1599px.
Kjo është, ato stilet e elementeve të faqes që duhet të përshtaten në varësi të zgjidhjes së ekranit duhet të shkruhen veçmas për secilën gjerësi të mundshme të ekranit.
Rezolucioni më i rëndësishëm i ekranit kur layout përshtatës
- 320 px - Pajisje mobile (orientim portreti);
- 480 px - Pajisjet mobile (orientimi i peizazhit);
- 600 px - tableta të vogla;
- 768 px - Pllakat (portret orientimi);
- 1024 px - Pllakat (orientim peizazh) / Netbooks;
- 1280 px dhe më shumë - PC.
Është në këto leje që theksi duhet të vendoset dhe vëmendje e veçantë duhet t'u kushtohet atyre në planin adaptiv. Këto janë llojet më të zakonshme të zgjidhjeve të ekranit.
Rrjeti mund të ndahet në katër lloje të faqeve: fikse, lëngëse, adaptive dhe të përgjegjshme. Secili prej tyre ka karakteristika të ndryshme dhe forma të zhvillimit, si dhe probleme specifike në fazën e projektimit dhe të meta që duhet të merren parasysh. Siç nënkupton emri, faqosja fikse ka madhësinë e specifikuar nga projektuesi i uebit. Kjo madhësi nuk varet nga pajisja që përdoret për të hyrë në të, pavarësisht nëse është një kompjuter desktop i zakonshëm ose një pajisje celulare, siç është një smartphone ose tablet. Madhësia më e rëndësishme në një paraqitje fikse është gjerësia e faqes, pasi kemi një zakon të madh për të lëvizur një faqe nga maja në fund se nga e majta në të djathtë - kështu që faqet me navigacion horizontal nuk janë të njohura sepse janë të huaj për mënyrën tonë të zakonshme të surfing Rrjeti.
bootstrap dizajn i përgjegjshëm
Është shumë i përshtatshëm për t'u përdorur për të krijuar një tabelë adaptive të paraqitjes. Përshtatje është që të gjitha stilet për të përshtatur blloqet, butonat, tabelat etj. shkruhet tashmë në bootstpap. Ju duhet vetëm të kuptoni se cila klasë duhet të caktojë.
Për të filluar, shkarkoni versionin më të fundit të bootstrap dhe lidheni atë në faqen tuaj. Ju lutem vini re se lidhja e stileve dhe skripteve me wordpress ka karakteristikat e veta.
Shtrirja fikse ka përparësinë që pamja e njëjtë nuk varet nga rezolucioni i ekranit të përdoruesit: një faqe interneti me përmasa 960 pikselë do të ketë të njëjtën gjerësi, pavarësisht nëse përdoruesi ka një rezolucion të lartë ose të ulët të ekranit. Përveç kësaj, gjerësia e linjave nuk do të ndryshojë pavarësisht nga madhësia e shfletuesit ose rezolucioni i përdoruesit, gjë që do ta bëjë leximin më të lehtë.
Projektimi me një gjerësi fikse është më i thjeshtë, sepse më pak vëmendje i kushtohet përshtatjes së ndryshimeve në rezolucione të ndryshme dhe pajisjeve të ndryshme dhe montimi i shpejtë i tyre. Por jo të gjitha lule në një plan urbanistik të fiksuar. Layouts korrigjuar gjithashtu mund të shkaktojnë probleme, sidomos në monitoret me rezolucione shumë të ulëta ose shumë të larta.
Layout në bootstrap është e ndryshme në atë që gjerësia e bllokut ose ekran është e ndarë në 12 pjesë të barabarta. Dhe caktimi i një klase të caktuar në një bllok, ju mund të vendosni gjerësinë e bllokut të barabartë me numrin e dëshiruar të pjesëve.
Për shembull, një dizajn i tillë do të lejojë që të shpërndajë një bllok të gjerë për përmbajtjen me një gjerësi prej 8 pjesësh dhe një të ngushtë për një sidebar me gjerësi prej 4 pjesëve të ekranit:
në rezolucione të ulëtaku gjerësia e ekranit është më e vogël se gjerësia e faqes, faqja mund të shfaqet me lundrim horizontal, gjë që e vështirëson leximin. Tashmë në rezolucione të larta, në anët mund të shfaqen shumë hapësirë në anët, gjë që çon në një hapësirë të tepërt të bardhë dhe në nevojën për vendosjen vertikale më shumë se që është e nevojshme. Për të mos përmendur se nuk i trajton përdoruesit që ndryshojnë madhësinë e shkronjave nga një pikë e caktuar, duke prishur paraqitjen.
Në kontrast me paraqitjen fikse, lëngu synon të sigurojë që përmbajtja zë tërë ekranin e shfletuesit, pavarësisht nga rezolucioni i ekranit, gjë që i lejoi projektuesit të shfaqin më shumë përmbajtje në vëzhguesit e mëdhenj, por ende mbeten të dukshme në ekranet më të vegjël. Shtrirja e rrjetit gjithashtu siguron qëndrueshmëri në gjerësi relative, duke lejuar që faqja të përgjigjet më dinamike kur përdoruesi të ndryshojë madhësinë e shkronjave. Qëllimi i këtij lloji të planit është që të ruajë të njëjtën peshë hapësinore në të gjitha elementet.
Gjerësia e blloqeve do të llogaritet automatikisht në varësi të gjerësisë së ekranit. Dhe kur shihet në një pajisje të lëvizshme, këto blloqe do të lëvizin nën njëri-tjetrin.
Ju gjithashtu mund të rregulloni indentation e bllokut nga buzë, përsëri, në numrin e dëshiruar të pjesëve. Për shembull, një ndërtim i tillë:
Mendoni për vendosjen e lëngut si një lëng në një enë; ajo zë gjithë hapësirën, pavarësisht nga forma. Për fat të mirë, ne nuk kemi ekran të rrumbullakët, dhe shumica dërrmuese janë drejtkëndëshe, kështu që ne mund të parashikojmë përafërsisht se si faqja do të duket në vëzhgues të ndryshëm.
Një plan urbanistik i pastër që duket si shumë probleme. Ata që punojnë me Layouts të lëngshme, preferojnë të punojnë me masa në përqindje, të cilat ndryshojnë në varësi të madhësisë së dobishme të shfletuesit të përdoruesit. Kjo kërkon një durim pak më shumë dhe testim të vazhdueshëm për të marrë informacionin e duhur.
Një bllok me një gjerësi prej 10 pjesësh do të krijohet me një majtë të prerë në një pjesë të ekranit.
Nëse e kuptoni, atëherë duke punuar me bootstrap e bën atë shumë të shpejtë. Çfarë i bën këto stil saktësisht të funksionojë si duhet dhe nuk do të ketë asgjë të shtrembër në këtë faqe interneti.
Në të ardhmen kam në plan të jap disa mësime për të punuar me bootsrap. Prandaj, ju këshilloj të mos e humbisni këtë moment.
Përveç kësaj, mund të ketë probleme me elementë me gjerësi fikse në kolonën e lëngshme. Nëse kolona bëhet imazh më të vogëlDisa shfletues mund të rrisin gjerësinë e imazhit, duke mos i kushtuar vëmendje kufizimeve të vendosura nga projektuesi. Nga ana tjetër, shfletuesit e tjerë mund të mbivendosen tekstin me imazhin në mënyrë që të përpiqen të ruajnë përqindjet e sakta.
Një faqe interneti me këtë lloj faqosjeje ka aftësinë të ndryshojë sipas secilës rezolutë të re. Është sikur të kesh faqe të shumëfishta statike pajisje të ndryshmepor me vetëm një faqe të përmbajtjes. Avantazhi i kësaj është se ndërfaqja e përdoruesit mund të përshtatet për t'iu përshtatur çdo pajisjeje ose zgjidhjes së ekranit pa pasur nevojë të shqetësohet me përmbajtjen.
Kontrollin e përshtatshmërisë së sitit
Por lind pyetja: si të kontrolloni përshtatshmërinë e faqes? Këtu ju keni përcaktuar kërkesat e mediave në CSS, bootstrap i tëri dhe përdorni klasat e nevojshme. Dhe si e kontrolloni që faqja përshtatet në të gjitha rezolutat e ekranit?
Shumë e saktë dhe më e rëndësishmja është një shërbim falas që meriton respekt dhe falë webmasters dhe web designers të cilët janë të angazhuar në layout adaptive e vendeve.
Por, sigurisht, ka kohë të këqija: koha e nevojshme për të krijuar një faqe me një skicë adaptive është shumë më e lartë, sepse duhet të kontrollohet manualisht në të gjitha pajisjet e mundshme - gjë që krijon një pikë tjetër negative: është shumë e vështirë të ruhet kontrolli i rezolutës së ekranit nga të gjitha pajisjet ekzistuese, për secilin, dhe pastaj mos flisni.
Kjo është një valë e re e momentit: dizajn web i përgjegjshëm ose dizajn i përgjegjshëm web. Kjo është një metodë moderne që web designers preferojnë për të lehtësuar shikimin në pajisje të ndryshme. Faqja është rregulluar kur rezoluta është zvogëluar, por kur ekrani të bëhet shumë i vogël për të shfaqur përmbajtjen në mënyrë korrekte, ai rregullon përmbajtjen sipas një skicimi më të përshtatshëm. Kjo do të thotë se dizajni nuk është i dizajnuar për pajisje specifike, por faqja është për përmbajtje.
E pra, si e artikuloni? A është gjithçka e qartë? Nëse jo, shkruani në komentet, ne do të kuptojmë së bashku.
Po, për të bërë një dizajn të përgjegjshëm të faqes, duhet të punosh shumë. Por këto vepra do të shpërblehen me një qëndrim të favorshëm për motorët e kërkimit tuaj të faqes, dhe më e rëndësishmja për vizitorët në faqen tuaj.
Gazetarët teknik nuk janë më viti i parë që bërtasin për epokën e post-PC, shitjet e kompjuterëve të faktorëve të formave tradicionale janë në rënie të pashmangshme, siç janë edhe rezervat e prodhuesve të tyre. Por numri i pajisjeve të lëvizshme, smartfonë ose tabletë, po rritet vazhdimisht.
Kjo është, dizajni është optimizuar për të gjitha pajisjet. Ai ndryshon nga faqosja adaptive, sepse nuk ka nevojë të programoni faqen për të punuar në çdo rezolutë ekzistuese dhe gjithashtu ndryshon nga faqosja e rrjetit, duke marrë parasysh të gjitha objektet në faqe.
Këto ditë, po aq mirë sa dizajni i përgjegjshëm i uebit, ende ka defekte: procesi i dizajnimit fillestar kërkon përgatitje shumë më të hollësishme, sepse dizajni duhet të dizajnohet, duke menduar se si do të veprojë në rezolucione të vogla dhe të mëdha. Kjo do të thotë se zhvillimi i një skicimi të tillë kërkon më shumë kohë, por është projektuar për një ndërfaqe më të mirë përdorimi në pajisje të ndryshme.
Për një projektues, kjo do të thotë, para së gjithash, se ka të paktën diçka në TK rreth pajisjeve mobile ose jo, ai duhet të nxjerrë një skicë në mënyrë që faqja të mund të përdoret nga telefoni (dhe, akoma më shumë, tableta). Dhe kjo do të thotë jo vetëm që butonat duhet të jenë të mundshëm për të marrë një gisht. Në mënyrë ideale, natyrisht, vendi duhet të ketë një të veçantë versioni celularPor, siç tregon përvoja jonë, shumica e klientëve nuk duan të ndajnë fonde shtesë për të, por ata me siguri do të ankohen nëse diçka nuk punon për ta nga pajisja e tij e preferuar e Apple.
Nëse keni akses në një faqe interneti me shpejtësi të lartë, do të shihni se ai përgjigjet ndryshe sipas lejes tuaj. Shqyrto një nga shembujt më poshtë dhe ndrysho madhësinë e ekranit duke u rritur ose zvogëluar për të parë se si funksionon.
Përkufizimi i dizajnit të përgjegjshëm mbulon disa aspekte të marketingut dhe dizajnit. Ne kemi material për ju që të mësoni se si të krijoni një faqe interneti. Duke bërë një përkufizim të shkurtër, dizajni i përgjegjshëm është kur faqosja e faqes është e përshtatshme për pajisjen që përdoret. Shumë vite më parë u vendos që madhësia e parazgjedhur për krijimin e faqosjes për faqet do të jetë 960 piksele. Por me këtë realitet të ri që njerëzit përdorin ekranet e madhësive të ndryshme, ata duhet të përshtaten. Dhe kjo është pikërisht ajo që thotë emri: dizajni "i përgjigjet" pajisjes së përdorur nga veprimi.
Duke kujtuar grackën që designers kanë ardhur të njohin mua, gjëja e parë që shkakton probleme me Layouts ata pikturuar është mungesa e ideve të sakta se sa piksele do të përshtaten në ekran me një rezolutë nominale më të lartë se ajo e monitorit desktop 20 '. Epo, kjo është në rregull, u llogarit një numër i madh i marketingut. Ky artikull do të ndihmojë për të kuptuar situatën.
Shkruani këtë regjim një herë - për të garantuar cilësinë për çdo layout, nuk është më diferenciale! Dizajni reaktiv vazhdon sipas pajisjes së përdorur. Tashmë është adaptive vjeçar punoni me pajisjet ku përmbajtja është duke pritur që shfletuesi të përfundojë. Në sistemin adaptiv ka një kod për çdo version të faqes dhe pajisjes. Shembull: kod kur faqja shfaqet në monitor, një kod tjetër për telefonat inteligjentë.
Ndërsa në vëzhgues ju mund të organizoni lirshëm plan urbanistik horizontalisht, në rast të kthimit ju duhet të mendoni se si përmbajtja, ngjyra dhe forma do të organizohen vertikalisht. Për shembull, mendoni për një smartphone. Kur të përshtatet faqja, përmbajtja rrëzohet dhe kjo quhet një transmetim. Nëse diçka bëhet statike, imazhet që përshtaten do të "shtyjnë" ose mbivendosen në këmbë, për shembull.
Po flasim për pajisjet në Android dhe iOS, ndërsa WP është ende ekzotike dhe pa përvoja personale, nuk do të ndërmarrë rekomandime.
Nëse nuk ka meta tags në dokumentin HTML që i tregojnë shfletuesit celular se si të gjerë për të shfaqur dokumentin, atëherë shfletuesit do të sillen sikur dokumenti ishte 980 piksele të gjerë. Kjo është e vërtetë për telefonat me një gjerësi të ekranit prej 320 piksele, dhe për tableta 10 inç duke përdorur Android dhe iOS dhe një shfletues në Webkit. Kjo qasje nënkupton që faqet me gjerësi minimale 960 pikselë do të marrin fusha të vogla për perceptimin e lehtë të përmbajtjes.
Nëse gjerësia minimale e dokumentit është më e madhe, atëherë sjellja e shfletuesve fillon të ndryshojë. Safari në iPhone / iPad në shumicën e rasteve thjesht do të kompresojë përmbajtjen. Në Android, DIP do të shfaqet vetë - densitet-pavarur pixels, më shumë për të cilat më vonë. Nëse gjerësia e dokumentit është më e madhe se 980 dhe më e madhe se gjerësia e pajisjes në DIP, ajo do të lëvizë drejt. Pra, një faqe me një gjerësi prej 1040 piksish do të shfaqet pa lëvizje horizontale në iPhone dhe iPad (1024 piksela), por shkulje në telefona si galaktika S3 (rezolucioni fizik 1280x720) ose tableta Nexus 7 (rezolucioni fizik 1280x800).
Cilat janë konkluzionet që duhen nxjerrë? Pavarësisht nga bollëku i ekraneve me ekran të gjerë në kompjuterë dhe laptopë, rrjeta e mirë e vjetër 960 piksel nuk ka humbur rëndësinë e saj. Shfletuesit celularë gjithashtu kanë aftësinë për të përshtatur blloqet e tekstit në një format që është lehtësisht i lexueshëm në pajisje, për shembull, për të shtypur tekstin në një kolonë të ngushtë në telefon dhe për të rritur fontin e saj. Kjo nuk do të funksionojë nëse teksti që përmban bllokun është rreptësisht i kufizuar në lartësi. Në të vërtetë, kurrë nuk duhet të bëni një vend ku diçka është e kufizuar në lartësi, veçanërisht nëse vizitorët planifikohen nga pajisjet mobile. Një armik tjetër i pajisjeve mobile, sidomos telefonat, janë elementë me pozitë: fikse. Për shembull, butoni tani në modë mbrapa, vazhdimisht kandidon pas përdoruesit në faqe. Edhe më keq - vdes i madh, si një kapak fiks. Elemente të tilla jo vetëm që zënë hapësirë të dobishme në një ekran të vogël, por gjithashtu mbesin në të njëjtin vend gjatë zmadhimit. Problemi është gjithashtu karakteristik dritare modale. Nëse ato shfaqen në mes të ekranit, atëherë nga një telefon celular rritja e përmbajtjes së tyre kërkon shkathtësi të konsiderueshme. Përdorimi i popupave si "mbaj në kontakt me ne" rrjeteve sociale! ", Duke vepruar në mënyrë të ngjashme - në përgjithësi, mosrespektimi i ashpër për përdoruesit e pajisjeve mobile, sepse shpesh është më e lehtë të largohet nga faqja sesa të mbyllet ky popup.
Konsideroni shembullin e disa vendeve.
Përkundër faktit se tape.ru ka një version shumë të mirë celular, kalimi automatik në të nuk është kryer. Në desktop-menu fikse ngjitet në tekst me shkallë automatike. Para se përdoruesi të marrë një zgjedhje ose të shkallë me duart e tij, ose të mos jetë shumë dembel për të regjistruar m. në url.
RBC. Në përgjithësi, ata gjithashtu kanë një version celular, por kalimi në të kryhet vetëm me faqen kryesore. Një lidhje direkte (nga Google News, në veçanti) mund të shihet kjo kanavacë e palexueshme. A do të qëndrojë një vizitor në një vend të tillë? Vështirë.
Popup superkanonike vazhdoi në stilin RBC. Një shembull i shquar se si të bëhet nuk është i nevojshëm.
Intan, cili version mendon se kush. Natyrisht, e kuptoja plotësisht se përse ishte gabim të veproja në këtë mënyrë nga menyja, por disi nuk kishte humor për të argumentuar. Bëni një pyetje nuk është në temë.
Një tjetër gjë që zakonisht nuk justifikon kohën e kaluar në tavolinën e punës dhe shkakton probleme në celular është elementët e formës doganore. Fakti që ata nuk janë pothuajse të konfigurueshëm nga mjetet CSS nuk ishte vetëm për shkak se konsorciumi i World Wide Web ishte i dobët.
Për shembull, ju keni tërhequr një listë të bukur drop-down. Për shembull, në shfletuesin e kompjuterit duket sikur çdo gjë tjetër, ajo hapet nga një klikim i miut dhe shkon me timon. Por në punën e lëvizshme me elementë të tillë ju do të shkaktoni probleme të mëdha. Nëse zgjidhni ishin standarde, përdoruesit do të shfaqet një dritare e sistemit me një daulle / drop-down list, në varësi të OS.
Dhe aftësia për të bashkëngjitur një skedar në iOS mungon si e tillë. Dhe nëse pamja standarde e butonit i lë të kuptohet përdoruesit se është i çaktivizuar, atëherë një buton i ndritshëm i bukur do të bëjë që ndjenja se diçka nuk po funksionon në faqen tuaj.
Natyrisht, në mënyrë ideale, duhet të përcaktohet një pajisje celulare, dhe për pajisjet mobile, skenarët që synojnë ndryshimin e ndërfaqes standarde nuk duhet të ekzekutohen.
Një tjetër veçori e pakëndshme e shfletuesve celularë është se aktualisht ata nuk i cache fonts plug-in. E njëjta PT Sans në të gjitha stilet, e lidhur me Google Web Fonts, ngarkon shumë gjatë. Në këtë rast, vështirë se është e dukshme humbet Helvetica / Roboto e ndërtuar. Mendoni mirë, nëse ia vlen koha shtesë për të ngarkuar fontin tuaj personal.
Sizes dhe rezolucionet e pajisjeve mobile. Dallimi në mes të zgjidhjes fizike të ekranit dhe zgjidhjes në një shfletues mobil
IPhone dhe iPad përdorin konceptin e pikave - pikat e mollës. Zgjidhja e iPhone është deri në 5 modele - 320 nga 480 pixels. Çfarë është Retina Display? Retina Display përdor dendësi të dyfishtë pixel, domethënë, ekzistojnë 4 pixels fizike për pikë. Pra, iPhone 4 ka një rezolucion fizik të ekranit prej 640 deri në 960 piksele, por 320 nga 480 pixels. Por në të njëjtën kohë grafika është më e detajuar për shkak të përdorimit të imazheve dy herë të mëdha në aplikacione. Për iPhone 5, vlera në pike u rrit nga 480 në 568. Për iPad të të gjitha versioneve, duke përfshirë Mini, është gjithmonë 1024x768.
Për shembull, grafiku standard 1 deri në 1 në web (për shembull, imazhi i sfondit) do të shfaqet në një lloj pamjeje të zgjeruar, një piksel i imazhit të rasterit do të shtrihet me 4 piksele të ekranit fizik. Si të përdorim grafikë me rezolucion të lartë në këtë situatë do të diskutohet në seksionin tjetër. Gjëja kryesore që duhet të mbani mend rreth lejeve të pajisjeve iOS - nuk mendoni se faqet në retinë dhe në retinë nuk kanë gjerësi të ndryshme. Jo, ndryshimi është vetëm në densitet të pikselëve, përmasat janë absolutisht të njëjta.
Në Android, situata është shumë më e komplikuar, më saktë, më e larmishme. Android përdor konceptin e densitetit të ekranit të ndryshëm (DPI). Thelbi i saj është se me dimensione të ndryshme fizike të ekranit dhe zgjidhjes, modeli i sjelljes së pikave ndryshon në varësi të qëllimit të pajisjes. Një analog i pikave është DIP i lartpërmendur.
Dendësia e ekranit është 1. Kjo kategori përfshin shumë pajisje, të tilla si telefonat 320x480 (HTC Hero, LG Optimus One), tableta 7 inç 1024x600 ( Galaktikë Samsung Tab, Kindle Fire), tableta 10 inç (Asus Transformer, Acer A500, Galaxy Tab 10'1).
Dendësia e ekranit prej 1.33 përdoret në tableta 7 inç, si Nexus 7. Rezolucioni fizik është 1280x800, në DIP është 960x600.
Densiteti i ekranit prej 1,5 - telefonat celularë kategoria e çmimeve të lartë të vitit 2011 dhe mesatarja e 2012, 10-inch tableta me FullHD. Për shembull, Nexus One 480x800 piksel, 360x533 * DIP, HTC One S - 540x960 piksel, 360x640 DIP, dhe Asus Transformer Pad Infinity 1920x1200 piksele, 1280x800 DIP.
* Në Android Developers, është gjetur 534, por matja e gjerësisë së shfletuesit përmes JS tregon saktësisht 533, respektivisht, dhe në pyetjet e medias është e vlefshme duke u udhëhequr nga kjo shifër.
Dendësia e ekranit 2-telefonave të kategorisë së lartë të çmimeve të vitit 2012 dhe fjalë për fjalë një çift i tabletave. Për shembull, HTC One X, Samsung Galaxy S3 - rezolucioni i ekranit është 1280x720, dimensionet në DIP 360x640. Google Tablet Nexus 10 - rezolucion 2560x1600 piksela, 1280x800 DIP.
Dendësia e ekranit 3 - flamurët e vitit 2013 me ekranin FullHD. Me një rezolucion prej 1920x1080 piksele, ata ende kanë të njëjtën DIP 360x640.
Për të gjithë këtë, ka ende një Google Nexus 4 të hutuar me një ekran prej 1280x768 piksele me një densitet prej 2 (384x640). Në modelet me çelësa në ekran 42DIP merr një panel për ta, prandaj në modelet e këtij lloji (Galaxy Nexus, Nexus 4, Sony xperia Z) në modalitetin portret, rezolucioni i portretit do të jetë pak më i vogël dhe do të jetë 598 piksele.
Kështu, ne kemi tre rezoluta për portret - 320, 460 dhe një rallë 384, dhe katër me gjysmë rezolucion peizazhor - 480, 533, 568, 640 (598 me çelësa të butë).
Tabletat kanë portret 600 dhe 800, dhe panorama 960, 1024 dhe 1280.
Tabela më poshtë jep listën e lejeve më të zakonshme për produktet popullore:
Si të fillosh të punosh në një aplikacion të celularit?
Për fillim, lexoni udhëzimet. Aplikacionet për platforma të ndryshme duhet të duken ndryshe. Për shembull, pas lidhjes ju mund të krahasoni elementët tipikë të sistemeve operative të ndryshme.
Për të punuar në një paraqitje të aplikacioneve iPhone, krijoni një kanavacë 640x1136 (960) dhe përdorni dimensione që janë një shumëfish i dy. Të gjitha grafikat, të gjitha fontet duhet të jenë të tilla.
Një shirit i gjendjes me tregues sinjali, bateri etj. Mund të zënë një pjesë të caktuar të ekranit në aplikacionin tuaj të ardhshëm. Këto janë 20 pikë në iOS dhe 25 DIP në Android. Telefonat Android Me çelësat e butë dhe 48 tableta DIP në pjesën e poshtme të ekranit, ajo merr një vdes për ta (Navigation Bar). Në të njëjtën kohë, në pajisjet jo kanonike si pllakat Samsung, për shkak të përdorimit të shell origjinal, Bar Navigation dhe Bar Status janë kombinuar.
Për një aplikacion për telefonat Android, është e rëndësishme për të marrë një mori të paktën 720x1280. Është më mirë që vetëm 1080x1960, bazuar në fluturimet moderne.
Për një kanavacë prej 720x1280, dimensionet duhet gjithashtu të jenë një shumëfish i dy, për 1080x1960, një shumëfish i tre. Duke përdorur 480x800 ose 640x960 si një kanavacë është një ide shumë e keqe.
Në procesin e punës në paraqitjen, është e nevojshme që të reduktohet në mënyrë periodike madhësia e dritares së redaktorit grafik në madhësinë e përafërt të pajisjes reale, si dhe të ruhen JPG-ja dhe ta shohin atë në pajisjen reale. Mund ta godas butonin me gishtin tim? A nuk është teksti shumë i vogël?
Duke përdorur një paraqitje madhësie të papërshtatshme, përgjegjësia për paraqitjen e aplikacionit ose grafiku i synuar do të jetë krejtësisht mbi ju.
Në përgjithësi, jini të vëmendshëm ndaj detajeve dhe mos harroni - pikselet dhe pikat / dipy nuk janë të njëjta gjë.
Optimizoni grafika web për ekranet me densitet të lartë
Pra, kemi mësuar se ka disa opsionet e mundshme pixel në ekran. Prandaj, për të shmangur efektin e grafikut të paqartë, i njohur edhe si "Efekti Playstation", ne duhet të përdorim grafikë raster ose rezaktorë grafikë me rezolucion më të lartë, si SVG.
Në të njëjtën kohë, përkrahja për SVG është ende shumë e kufizuar, dhe për pajtueshmëri të prapambetur me shfletuesit e vjetër ju duhet të përdorni një raster. Një tjetër dhimbje koke do të jetë përdorimi i sprites - vlerat e pozitës sfond do të duhet të tregohet në përqindje, të cilat do të kërkojnë llogaritjet e mëdha matematikore. Mënyra më pak e komplikuar është përdorimi i disa varianteve të imazheve të njëjta, nëpërmjet një kërkese mediatike, për shembull -webkit-min-device-pixel-ratio: 2.
Siç mund ta shikoni, vetë teknikë është shumë e thjeshtë dhe kërkon vetëm praninë e disa versioneve të së njëjtës fotografi, nëse përdoret si imazh sfondi. Imazhet e rregullta, nëse është e nevojshme, mund të ngarkohen dy herë më të mëdha se ato duhet të jenë në madhësi dhe të përshkruajnë madhësinë që dëshironi në faqe përmes atributit të stilit.
Dobësi është, në fakt, pesha më e madhe e imazheve me rezolucion të lartë. Këtu ju duhet të vendosni se çfarë është më e rëndësishme - përmbajtja që përdoruesi e sheh pas një periudhe më të gjatë kohore për shkak të peshës së faqes ose dizajnit.
Vota: 416 | Shikime: 4271