Ինչպես դարձնել կայքը բջջային հեռախոսի համար հարմարվող

Կայքը բջջային հեռախոսի համար հարմարվող դարձնելու համար ավելացրեք viewport մետա պիտակ, կառուցեք դասավորությունը mobile-first սկզբունքով ճկուն լայնություններով և օգտագործեք CSS բեկման կետեր՝ մեծ էկրաններում այն վերադասավորելու համար՝ սյուները դասավորելով մեկը մյուսի տակ, ընտրացանկը ծալելով և պատկերները հարմարեցնելով։ Ապա ստուգեք յուրաքանչյուր էջ հեռախոսի լայնությամբ՝ կողքին ոլորվելու, չափազանց փոքր տեքստի և շատ փոքր հպվող կոճակների համար։ AI-ով կառուցված կայքում մեկ հստակ հուշում և անցում հեռախոսի չափի նախադիտարկմամբ սովորաբար լուծում է մեծ մասը։

Ինչ է իրականում հարմարվող նախագծումը

Հարմարվող կայքը օգտագործում է էջերի և URL-երի մեկ հավաքածու, որ հարմարվում է էկրանին։ «m.» առանձին կայքի փոխարեն CSS-ը փոխում է դասավորությունը որոշ լայնություններում, որոնք կոչվում են բեկման կետեր (breakpoints)։ Կառուցվածքային բլոկները․

• Viewport մետա պիտակը ասում է բջջային բրաուզերներին օգտագործել սարքի իրական լայնությունը։
• Ճկուն դասավորությունները օգտագործում են տոկոսներ, flexbox և grid, այլ ոչ թե ֆիքսված պիքսելային լայնություններ։
• Media query-ները (կամ շրջանակի դասեր, ինչպիսին է Tailwind-ի md:-ը) փոխում են դասավորությունը որոշակի լայնությունից վեր։
• Ճկուն մեդիա — պատկերներ և տեսանյութեր, որոնք փոքրանում են՝ տեղավորվելու համար իրենց կոնտեյներում։

Դա կարևոր է, քանի որ ձեր տրաֆիկի մեծ մասը հավանաբար գալիս է հեռախոսներից, և որովհետև Google-ը ինդեքսավորում է ձեր էջերի բջջային տարբերակը։ Եթե բովանդակությունը կամ հղումները գոյություն ունեն միայն աշխատասեղանի վրա, Google-ը նույնպես կարող է չտեսնել դրանք։

Տարբերակներ և փոխզիջումներ

Mobile-first-ը սովորաբար ավելի պարզ է․ մեկ սյունը ամենապարզ դասավորությունն է, և սյուներ ավելացնելը, երբ տարածքը մեծանում է, պակաս աշխատանք է, քան դրանք հեռացնելը։

Այն մասերը, որոնք սովորաբար կոտրվում են

Viewport պիտակը

Եթե էջը հեռախոսում նման է փոքր աշխատասեղանի կայքի, viewport պիտակը բացակայում է․

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

Մի ավելացրեք maximum-scale=1 կամ user-scalable=no։ Մատով խոշորացումը արգելելը կայքը ավելի դժվար է դարձնում թույլ տեսողություն ունեցող մարդկանց համար։

Ֆիքսված լայնություններ և հորիզոնական ոլորում

Հարմարվող ամենատարածված սխալը էկրանից լայն բանն է․ ֆիքսված width: 1200px կոնտեյներ, լայն աղյուսակ, երկար URL կամ կոդի բլոկ, պատկեր առանց max-width: 100%-ի։ Ամբողջ էջը այդ ժամանակ ոլորվում է կողքին։ Օգտագործեք max-width-ը width-ի փոխարեն, թույլ տվեք տեքստին փաթաթվել և տվեք լայն բաներին իրենց սեփական ոլորման տարածքը։

Նավիգացիա

Հինգ աշխատասեղանի ընտրացանկի հղումը հազվադեպ է տեղավորվում հեռախոսում։ Սովորական պատասխանը ընտրացանկի կոճակն է, որը բացում է վահանակ։ Պահեք երկու-երեք ամենակարևոր գործողությունները տեսանելի՝ «Ամրագրել», «Զամբյուղ», «Մուտք», և համոզվեք, որ ընտրացանկը աշխատում է ստեղնաշարով և հեշտ է փակել։

Տեքստ և հպման թիրախներ

• Հեռախոսներում 16 պիքսելի շուրջ հիմնական տեքստը ողջամիտ նվազագույնն է։ Ավելի փոքր տեքստով ներածման դաշտերը iPhone-ները մեծացնում են, երբ դրանց հպվում են։
• Դարձրեք կոճակներն ու հղումները հեշտ հպելի։ WCAG 2.2 AA-ն սահմանում է 24 առ 24 CSS պիքսելի նվազագույնը (կամ բավարար հեռավորություն)․ մոտ 44 պիքսել ավելի հարմար է մատների համար։
• Թողեք տարածություն հարևան հղումների միջև, որ մարդիկ սխալ չհպվեն։

Աղյուսակներ և տվյալներ

Լայն աղյուսակները բջջային հավելվածի ամենադժվար մասն են։ Տարբերակները, նախապատվության կարգով․ ցույց տալ ավելի քիչ սյուներ հեռախոսներում, յուրաքանչյուր տողը դարձնել քարտ, կամ դնել աղյուսակը հորիզոնական ոլորվող կոնտեյների մեջ՝ առաջին սյունը ամրացված։ Ընտրեք՝ ըստ այն բանի, թե ինչ են մարդիկ պետք համեմատելու։

Պատկերներ և մեդիա

Օգտագործեք max-width: 100% և height: auto, մատուցեք ավելի փոքր ֆայլեր փոքր էկրաններին srcset-ով և սահմանեք լայնություն և բարձրություն՝ դասավորության թռիչքներից խուսափելու համար։ Ներկառուցված տեսանյութերը և քարտեզները պետք է ունենան հարմարվող փաթաթան, որ պահեն իրենց հարաբերակցությունը։ Ավելի փոքր պատկերները նաև արագացնում են էջերը․ տե՛ս ինչպես արագացնել կայքը։

Ձևեր

Դրեք պիտակները դաշտերի վերևում, դարձրեք դաշտերը լրիվ լայնությամբ և օգտագործեք ճիշտ ներածման տեսակները (type="email", type="tel", inputmode="numeric"), որ հեռախոսները ցույց տան համապատասխան ստեղնաշարը։ Դրեք ուղարկման կոճակը այնտեղ, որտեղ մատը կհասնի, և պահեք այն տեսանելի, երբ ստեղնաշարը բացվում է։

Միայն hover-ով փոխազդեցություններ

Հեռախոսները hover չունեն։ Գործիքների հուշումները, բացվող ցուցակները և նախադիտարկումները, որոնք հայտնվում են միայն hover-ով, անտեսանելի են հպման օգտատերերի համար։ Դարձրեք դրանք աշխատող նաև հպումով։

Հուշումներ, որ աշխատում են

Նոր կառուցման համար ասեք սա սկզբից․

Կառուցեք mobile-first։ Մեկ սյուն հեռախոսներում, երկու սյուն պլանշետի լայնությունից, լրիվ դասավորություն աշխատասեղանին։ Առանց հորիզոնական ոլորման 320 պիքսել լայնության վրա, հիմնական տեքստը առնվազն 16 պիքսել, հպման թիրախները առնվազն 44 պիքսել, փոքր էկրաններին ընտրացանկի կոճակ, և աղյուսակներ, որ հեռախոսներում դառնում են քարտեր։

Գոյություն ունեցող էջի համար նկարագրեք, ինչ տեսնում եք․

Հեռախոսներում /pricing էջը ոլորվում է կողքին, և երեք պլանի քարտերը սեղմված են իրար կողքի։ 768 պիքսելից ցածր դասավորեք քարտերը ուղղահայաց, համեմատման աղյուսակը թող ոլորվի հորիզոնական իր կոնտեյների մեջ՝ առանձնահատկությունների սյունը ամրացված, և պահեք աշխատասեղանի դասավորությունը անփոփոխ։

Ստուգեք յուրաքանչյուր էջ 375 պիքսել լայնության վրա։ Թվարկեք այն ամենը, որ դուրս է գալիս, համընկնում է, 16 պիքսելից փոքր տեքստ է կամ 44 պիքսելից փոքր հպման թիրախ, կամ աշխատում է միայն hover-ով, ապա շտկեք յուրաքանչյուրը։

Քայլ առ քայլ

1. Հաստատեք viewport պիտակը էջի head-ում։
2. Փորձարկեք 320–375 պիքսել լայնության վրա բրաուզերի սարքի ռեժիմում կամ հեռախոսի չափի նախադիտարկմամբ։ Ոլորեք յուրաքանչյուր էջ վերևից ներքև։
3. Նախ շտկեք հորիզոնական ոլորումը։ Գտեք չափազանց լայն տարրը․ մնացածը դժվար է գնահատել, մինչև այն չվերանա։
4. Կարգավորեք նավիգացիան․ ընտրացանկի կոճակ, կարևոր գործողությունները տեսանելի։
5. Ստուգեք տեքստը, հպման թիրախները և ձևերը յուրաքանչյուր հիմնական հոսքում՝ գրանցում, որոնում, վճարում, կոնտակտ։
6. Կարգավորեք աղյուսակները և մեդիան․ քարտեր կամ ոլորման տարածքներ, հարմարվող պատկերներ և ներկառուցումներ։
7. Ստուգեք միջանկյալ չափերը։ Դանդաղ քաշեք լայնությունը հեռախոսից մինչև աշխատասեղան․ դասավորությունները հաճախ կոտրվում են պլանշետի լայնության մոտ։
8. Փորձարկեք իրական հեռախոսի վրա։ Էմուլյատորները բաց են թողնում բաներ, ինչպիսիք են ստեղնաշարը, որ ծածկում է կոճակը, ծայրերը և այն, թե որքան արագ է կայքը բջջային ինտերնետով։

Սովորական սխալներ

• Փորձարկել միայն մեկ հեռախոսի չափով։ Ստուգեք փոքր հեռախոս, մեծ հեռախոս և պլանշետ։
• Թաքցնել բովանդակությունը բջջայինում, որպեսզի տեղավորվի։ Google-ը ինդեքսավորում է բջջային տարբերակը, և հեռախոսի օգտատերերը ուզում են նույն տեղեկատվությունը։
• Անջատել խոշորացումը viewport պիտակում։
• Աշխատասեղանի չափի պատկերներ հեռախոսներում, որոնք արժեն բեռնման ժամանակ և տվյալներ։
• Ֆիքսված դիրքի տարրերը կուտակվում են․ կպչուն վերնագիրը, քուքիների banner-ը և չաթի փուչիկը կարող են ծածկել հեռախոսի էկրանի կեսը։
• Փակվող չեղող պոպ-ափեր փոքր էկրանին, որովհետև փակման կոճակը էկրանից դուրս է։

Բջջային ստուգաթերթ

• Viewport մետա պիտակը կա; խոշորացումը չի անջատված
• Ոչ մի էջ 320 պիքսելում հորիզոնական ոլորում չունի
• Հիմնական տեքստը մոտ 16 պիքսել; ներածման դաշտերը չեն մեծացնում էկրանը
• Հպման թիրախները հարմար մեծ են և տարածված
• Ընտրացանկը աշխատում է հեռախոսներում և ստեղնաշարով
• Աղյուսակները ընթեռնելի են հեռախոսներում (քարտեր, քիչ սյուներ կամ ոլորման կոնտեյներ)
• Պատկերներն ու ներկառուցումները մասշտաբավորվում են; պատշաճ չափի ֆայլեր են մատուցվում
• Ձևերը օգտագործում են ճիշտ ներածման տեսակները; ուղարկման կոճակը հասանելի է
• Ոչինչ կարևոր չի կախված hover-ից
• Փորձարկված է առնվազն մեկ իրական հեռախոսի վրա

Հարմարվող դասավորությունը նաև մատչելիության մաս է. WCAG-ը պահանջում է, որ բովանդակությունը աշխատի 320 պիքսել լայնության և 200% խոշորացման դեպքում։ Եթե կառուցում եք հավելված, որ մարդիկ ամեն օր կօգտագործեն իրենց հեռախոսներով, ինչպես կառուցել բջջային հարմար վեբ հավելված-ը գնում է ավելի հեռու, ներառյալ տեղադրվող PWA-ները։

Հարմարվող նախագծումը Mythex-ում

Mythex-ը կառուցում է հարմարվող վեբ հավելվածներ, և Pro-ում կարող է դրանք փաթաթել որպես Android և iPhone հավելվածներ։ Աշխատանքային տարածքում սեղմեք հեռախոսի պատկերակը Preview-ից վեր (Switch to Mobile)՝ ձեր հավելվածը տեսնելու հեռախոսի չափի շրջանակում, և քաշեք շրջանակի եզրը՝ այլ լայնություններ փորձելու համար (Preview և Code)։ Փաստաթղթերը ունեն կարճ մեկնարկային հուշում փոքր էկրանի դասավորությունը շտկելու համար բջջային հարմարվող հուշումներում։ Ստուգեք նաև իրական հեռախոսի վրա․ բացեք հրապարակված URL-ը կամ կիսվեք նախադիտարկման հղումով և բացեք այն ձեր հեռախոսում։

Հարցեր