Բարև ձեզ, հարգելի՛ ընթերցողներ։ Այս անգամ ես որոշեցի գրել մի գրառում, որն առավել օգտակար կլինի նրանց համար, ովքեր զբաղվում են կայքերի ձևավորմամբ և ուշադրություն են դարձնում դիզայնի ճկունությանը, այսինքն (ինչպես արդեն խոսել ենք Flexbox գրառման մեջ) կայքերի արտաքին ձևավորմանը` տարբեր չափերի էկրաններով սարքավորումների վրա։ Իհարկե, դրանք մենք կարող ենք ստուգել դիտարկչի չափերը ինքնուրույն փոքրացնելով, սակայն այդ մեթոդն այնքան էլ նպատակահարմար չէ, քանի որ այն ամբողջությամբ չի համընկնում սարքավորումների ցուցադրած արդյունքների հետ։ Այս գրառման մեջ ձեզ կներկայացնեմ այն լավագույն ծառայությունները (սերվիս), որոնցից ես օգտվել եմ իմ կարիերայի ընթացքում։
Առաջին այդպիսի սերվիսը, որն ուզում եմ ձեզ ներկայացնել՝ quirktools.com կայքում տեղադրված Screenfly գործիքն է։ Այն մեզ հնարավորություն է տալիս շատ արագ ստուգելու մեր կառուցած կայքի ճկունությունը։ Սակայն, որպեսզի կարողանանք օգտվել այս սերվիսից, մեզ նախ և առաջ հարկավոր է ունենալ մեր կայքը գոնե լոկալ սերվերի վրա, քանի որ այս սերվիսը հենց սկզբից մեզանից պահանջում է այն կայքի հղումը (url), որը մենք ցանկանում ենք ստուգել։ Պահանջվող մասում գրելով մեր կայքէջի հղումը և սեղմելով GO կոճակը, մեր կայքը կբացվի 1024x600px չափերով նետբուքի էկրանին, որտեղ արդեն մենք կարող ենք տեսնել, թե ինչքանով ենք ճիշտ կառուցել մեր կայքը։ Այս կայքի վերևի մասում կողք-կողքի տեղադրված են սերվիսի բոլոր գործիքները։
- Desktop բաժնում համակարգիչների և նոութբուքերի էկրանների ցանկն է, որտեղ գտնվում են 1024-1920px լայնությամբ էկրանները։ Այս ցանկից կարող ենք ընտրել էկրանի այն չափը, որի վրա ցանկանում ենք տեսնել մեր կայքի արտաքին տեսքը։
- Tablet բաժնում պլանշետների էկրանների ցանկն է։ Այստեղ հնարավորություն է ընձեռվում ընտրել տարբեր չափերի պլանշետներ և ստուգել մեր կայքի արտաքին տեսքը տարբեր տեսակի պլանշետների վրա։
- Mobile բաժնում կարող ենք ընտրել տարբեր չափերի էկրաններով հեռախոսներ։
- Television բաժինը նախատեսված է հեռուստացույցների էկրանների ընտրության համար։
- Custom Screen Size բաժնում կարող ենք ինքնուրույն ստեղծել սարքավորումների այնպիսի չափեր, որոնք նախորդ բաժիններում առաջարկվող տարբերակների մեջ չենք գտել։
- Refresh – ը նախատեսված է փոփոխությունների դիտման նպատակով կայքը թարմացնելու համար ։
- Rotate Screen – ի միջոցով կարող ենք 90 աստիճանով պտտել ընտրված սարքավորման էկրանը։
- Allow Scrolling – ը հնարավորություն է տալիս անջատել կամ միացնել էջի scroll-ը։
Ինչի՞ համար է պետք scrool – ն անջատելու հնարավորությունը։ Հեռախոսների կամ պլանշետների էկրանների վրա scroll-ի չափերը շատ փոքր են և շատ դեպքերում դրանց չափերը ազդեցություն չեն ունենում կայքի վրա։ Իսկ այստեղ նրա չափերն անհամեմատ մեծ են և ազդում են կայքի արտաքին տեսքի վրա։ Ճիշտ արդյունք ստանալու համար ավեի ճիշտ կլինի անջատել scroll-ի հնարավորությունը։ - Share – ի միջոցով կարող ենք ընկերների հետ կիսվել այդ պահին մեր ստացած արդյունքով։
Կարծում եմ, բավականին հարմարավետ սերվիս է նմանատիպ ստուգումներ իրականացնող անձանց համար։
Այս սերվիսից օգտվելը նույնպես բավականին հարմարավետ է։ Այն ինչ-որ տեղ ավելի պարզ է և միաժամանակ արդյունավետությամբ չի զիջում նախորդ սերվիսին։ Այն նույնպես հնարավորություն է տալիս փորձարկելու մեր կայքը տարբեր չափերի էկրանների վրա, ինչպես նաև ստեղծելու սեփական սարքավորման չափերը։ Այստեղ բոլոր սարքավորումները տեղադրված են իրար տակ, որը, համաձայն եմ, կարող է մի փոքր անհարմարություն ստեղծել օգտվողի համար։
Կայքերի դիզայնի ճկունության թեստավորման ևս մի սերվիս, որը տալիս է բավակին ճշգրիտ արդյունքներ՝ ScreenQueries – ն է։ Այս սերվիսի միջոցով նունպես կարելի է ստանալ ցանկալի արդյունք, սակայն այստեղ կան օգտագործման առումով որոշ անհարմարություններ։ Նախ՝ հենց սկզբից այն օգտագործելու համար անհրաժեշտ է գրանցվել այդ կայքում, այնուհետև ամեն անգամ օգտվելիս մուտք գործել գրանցված օգտանունով և գաղտնաբառով։ Այն թերություն համարել, բնականաբար, չի կարելի, սակայն օգտագործման արագության տեսանկյունից այնքան էլ հարմարավետ չէ։ Այս սերվիսի ավելի լուրջ անհարմարություն, որ նկատել եմ իմ կարիերայի ընթացքում, կարելի է համարել այն, որ սարքավորումներն ընտրելիս պետք է առաջնորդվել դրանց անվանումներով, օրինակ BlackBerry Z10, քանի որ այստեղ ընտրված սարքավորումների չափերը պիքսելներով այնքան էլ չեն համապատասխանում իրականությանը։ Այս սերվիսն ունի նաև մի առավելություն մյուս սերիսների նկատմամբ։ Այն վերևի հատվածում կողք-կողքի գրում է այն սարքավորումները, որոնք մենք ընտրել ենք։
Չնայած նրա ոչ իդեալական լինելուն, այս սերվիսը նույնպես կարելի է օգտագործել մեր կայքերի դիզայնի թեստավորման համար։
Սեփական JS կոդ
Վերը նշված սերվիսներից բացի, իմ այս գրառման մեջ ձեզ կներկայացնեմ նաև մի կոդ, որը տեղադրելով ձեր դիտարկչի վրա, նույնպես կարող եք ստուգել կայքի դիզայնը տարբեր սարքավորումների վրա։
javascript:void((function(d){if(self!=top||d.getElementById('toolbar')&&d.getElementById('toolbar').getAttribute('data-resizer'))return false;d.write('<!DOCTYPE HTML><html style="opacity:0;"><head><meta charset="utf-8"/></head><body><a data-viewport="320x480" data-icon="mobile">Mobile (e.g. Apple iPhone)</a><a data-viewport="320x568" data-icon="mobile" data-version="5">Apple iPhone 5</a><a data-viewport="600x800" data-icon="small-tablet">Small Tablet</a><a data-viewport="768x1024" data-icon="tablet">Tablet (e.g. Apple iPad 2-3rd, mini)</a><a data-viewport="1280x800" data-icon="notebook">Widescreen</a><a data-viewport="1920×1080" data-icon="tv">HDTV 1080p</a><script src="https://lab.maltewassermann.com/viewport-resizer/resizer.min.js"></script></body></html>')})(document));
Մշտական օգտագործման համար այն մեկ անգամ կտեղադրենք դիտարկչի վրա և անհրաժեշտության դեպքում հեշտությամբ կօգտվենք դրանից։ Շատ հարմար է այն դիտարկչի վրա պահել որպես էջանիշ (Bookmarks): Դրա համար դիտարկչի վրա բացում ենք նոր էջ, այստեղից սեղմում վերևում տեղադրված աստղի նշանի վրա՝ (Bookmarks), բացված փոքրիկ պատուհանի վրա ընտրում ենք Edit, Name դաշտում գրում ենք մեր ուզած անվանումը, օրինակ՝ Resizer, իսկ URL դաշտում տեղադրում ենք վերևում նշված կոդը, պահպանում փոփոխությունները և վերջ։ Մեր դիտարկչի էջանիշերի բաժնում արդեն ավելացավ ևս մեկը։
Այժմ տեսնենք, թե ինչպես պետք է օգտվենք դրանից։ Նշեմ, որ այս մեթոդից օգտվելու համար նույնպես անհրաժեշտ պայման է, որ մեր կայքը գտնվի գոնե լոկալ սերվերի վրա։ Այսպիսով, բացելով մեր կայքը, սեղմում ենք Resizer էջանիշի վրա և մեր էջի վերևում հայտնվում է մի այսպիսի տող․
Այստեղ նշված են սարքավորումների ամենատարածված չափերը, որոնք ընտրելով, մենք կտեսնենք մեր կայքի տեսքը տվյալ սարքավորման վրա։ Այստեղ նույնպես սեփական չափը դնելու հնարավորություն կա։ Դա իրականացվում է Customize գործիքի միջոցով։ Աջ կողմի Animate կոճակը սեղմելու դեպքում այն ավտոմատ կերպով սկսում է աստիճանաբար փոփոխել դիտարկչի չափերը։
Ես իմ փորձից ելնելով խորհուրդ եմ տալիս օգտվել այս մեթոդից, քանի որ այն աշխատում է շատ արագ և շատ հեշտ է նրանից օգտվելը։ Սակայն, եթե ձեզ դուր եկավ վերը նշված մեկ այլ տարբերակ, ապա ընտրությունը ձերն է, դրանք բոլորն էլ շատ հարմար են օգտագործելու համար։
Հույս ունեմ իմ այս գրառումը կօգնի ձեզ շատ հարցերում և դուք կկարողանաք կառուցել բազմաթիվ ճկուն դիզայնով գեղեցիկ կայքէջեր։ Հարցերի և առաջարկների դեպքում անպայման դիմեք մեզ՝ մեկնաբանությունների բաժնում։
Շնորհակալություն մեր բլոգից օգտվելու համար։ Հարգանքներով՝ IT-Blog.am թիմ։
