Jinsi ya Kufanya Tovuti Ijirekebishe kwa Simu

Ili kufanya tovuti ijirekebishe kwa simu, ongeza tagi ya viewport, jenga mpangilio kwa mtindo wa simu-kwanza kwa upana unaonyumbulika, kisha tumia breakpoints za CSS kuupanga upya kwenye skrini kubwa — kupanga safu juu ya nyingine, kukunja menyu na kupunguza picha ili zitoshee. Kisha kagua kila ukurasa kwa upana wa simu kuona kama kuna kusogea pembeni, maandishi madogo mno, au vitufe vidogo visivyoweza kugusika. Kwenye tovuti iliyojengwa kwa AI, ombi moja wazi pamoja na ukaguzi kwenye onyesho la ukubwa wa simu kwa kawaida hurekebisha sehemu kubwa ya tatizo.

Muundo unaojirekebisha kweli ni nini

Tovuti inayojirekebisha inatumia seti moja ya kurasa na URL zinazobadilika kulingana na skrini. Badala ya tovuti tofauti ya "m.", CSS hubadilisha mpangilio kwenye upana fulani, unaoitwa breakpoints. Vipengele vya msingi ni:

• Tagi ya viewport inayoviambia vivinjari vya simu vitumie upana halisi wa kifaa.
• Mipangilio inayonyumbulika inayotumia asilimia, flexbox na grid badala ya upana wa pikseli zilizowekwa.
• Media queries (au madarasa ya fremu kama md: ya Tailwind) yanayobadilisha mpangilio juu ya upana fulani.
• Vyombo vya habari vinavyonyumbulika — picha na video zinazopungua kutoshea kontena lake.

Ni muhimu kwa sababu sehemu kubwa ya wageni wako huenda wanatumia simu, na kwa sababu Google inaorodhesha toleo la simu la kurasa zako. Maudhui au viungo vilivyopo kwenye eneo-kazi pekee vinaweza pia kutoonekana kwa Google.

Chaguo na mabadilishano

Mtindo wa simu-kwanza kwa kawaida ni rahisi zaidi: safu moja ndiyo mpangilio rahisi zaidi, na kuongeza safu nafasi inavyoongezeka ni kazi ndogo kuliko kuziondoa.

Sehemu zinazovunjika mara nyingi

Tagi ya viewport

Ikiwa ukurasa unaonekana kama tovuti ndogo ya eneo-kazi kwenye simu, tagi ya viewport haipo:

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

Usiongeze maximum-scale=1 wala user-scalable=no. Kuzuia kukuza kwa kubana vidole kunafanya tovuti kuwa ngumu kutumia kwa watu wenye uoni hafifu.

Upana uliowekwa na kusogea pembeni

Hitilafu ya kawaida zaidi ya responsive ni kitu kipana kuliko skrini: kontena lenye width: 1200px lililowekwa, jedwali pana, URL ndefu au kizuizi cha msimbo, picha isiyo na max-width: 100%. Ukurasa mzima unasogea pembeni. Tumia max-width badala ya width, ruhusu maandishi kujifunga kwenye mistari, na kipe kitu kipana eneo lake la kusogeza.

Urambazaji

Viungo vitano vya menyu ya eneo-kazi mara chache hutoshea kwenye simu. Jibu la kawaida ni kitufe cha menyu kinachofungua paneli. Weka vitendo viwili au vitatu muhimu zaidi vionekane — "Weka miadi", "Kikapu", "Ingia" — na hakikisha menyu inafanya kazi kwa kibodi na inafungika kwa urahisi.

Maandishi na malengo ya kugusa

• Maandishi ya mwili karibu pikseli 16 ndiyo kiwango cha chini cha busara kwenye simu. Ingizo lenye maandishi madogo husababisha iPhone kukuza unapogusa.
• Fanya vitufe na viungo viwe rahisi kugusa. WCAG 2.2 AA inaweka kiwango cha chini cha pikseli 24 kwa 24 za CSS (au nafasi ya kutosha); karibu pikseli 44 ni rahisi zaidi kwa vidole.
• Acha nafasi kati ya viungo vilivyo karibu ili watu wasigonge kimoja kibaya.

Jedwali na data

Jedwali pana ndilo sehemu ngumu zaidi ya programu inayojirekebisha. Chaguo, kwa mpangilio wa upendeleo: onyesha safu chache kwenye simu, geuza kila safu kuwa kadi, au weka jedwali kwenye kontena linaloweza kusogezwa kwa usawa, na safu ya kwanza ikiwa imebandikwa. Chagua kulingana na kile watu wanachohitaji kulinganisha.

Picha na vyombo vya habari

Tumia max-width: 100% na height: auto, tuma faili ndogo kwa skrini ndogo kwa srcset, na weka upana na urefu ili kuepuka kuruka kwa mpangilio. Video na ramani zilizopachikwa zinahitaji kifungashio kinachojirekebisha ili zihifadhi uwiano wao. Picha ndogo pia zinafanya kurasa ziwe haraka — angalia jinsi ya kufanya tovuti yako iwe haraka.

Fomu

Weka lebo juu ya sehemu, fanya sehemu zichukue upana kamili, na tumia aina sahihi za ingizo (type="email", type="tel", inputmode="numeric") ili simu ionyeshe kibodi inayofaa. Weka kitufe cha kutuma mahali kidole kinapoweza kufika na kibaki kionekane kibodi inapofunguka.

Mwingiliano wa kuelea pekee

Simu hazina hover. Vidokezo, orodha kunjuzi na onyesho la kukagua linalotokea kwa hover pekee havionekani kwa watumiaji wa kugusa. Hakikisha vinafanya kazi kwa kugusa pia.

Maagizo yanayofanya kazi

Kwa ujenzi mpya, sema mapema:

Jenga kwa mtindo wa simu-kwanza. Safu moja kwenye simu, safu mbili kuanzia upana wa kompyuta kibao, mpangilio kamili kwenye eneo-kazi. Hakuna kusogea pembeni kwa upana wa pikseli 320, maandishi ya mwili angalau 16px, malengo ya kugusa angalau 44px, kitufe cha menyu kwenye skrini ndogo, na majedwali yanayogeuka kuwa kadi kwenye simu.

Kwa ukurasa uliopo, eleza unachokiona:

Kwenye simu, ukurasa wa /pricing unasogea pembeni na kadi tatu za mipango zimebanwa pamoja. Panga kadi wima chini ya 768px, fanya jedwali la kulinganisha lisogee kwa usawa ndani ya kontena lake pamoja na safu ya vipengele ikiwa imebandikwa, na uweke mpangilio wa eneo-kazi ulivyo.

Kagua kila ukurasa kwa upana wa 375px. Orodhesha kila kitu kinachovuka mipaka, kinachopishana, maandishi chini ya 16px au malengo chini ya 44px, au kinachofanya kazi kwa hover pekee, kisha rekebisha kila kimoja.

Hatua kwa hatua

1. Thibitisha tagi ya viewport iko kwenye kichwa cha ukurasa.
2. Jaribu kwa upana wa 320–375px kwenye hali ya kifaa ya kivinjari au onyesho la ukubwa wa simu. Sogeza kila ukurasa kutoka juu hadi chini.
3. Rekebisha kusogea pembeni kwanza. Tafuta kipengele kilicho pana mno; kila kitu kingine ni vigumu kukihukumu hadi hicho kiishe.
4. Panga urambazaji: kitufe cha menyu, vitendo muhimu vionekane.
5. Kagua maandishi, malengo ya kugusa na fomu kwenye kila mtiririko muhimu — kujisajili, kutafuta, malipo, mawasiliano.
6. Shughulikia jedwali na vyombo vya habari: kadi au makontena ya kusogeza, picha na embeds zinazojirekebisha.
7. Kagua ukubwa wa kati. Vuta upana polepole kutoka simu hadi eneo-kazi; mipangilio mara nyingi huvunjika karibu na upana wa kompyuta kibao.
8. Jaribu kwenye simu halisi. Emulators hukosa vitu kama kibodi ya skrini kufunika kitufe, notch, na kasi ya tovuti kwenye data ya simu.

Makosa ya kawaida

• Kujaribu ukubwa mmoja wa simu pekee. Kagua simu ndogo, simu kubwa na kompyuta kibao.
• Kuficha maudhui kwenye simu ili yatoshee. Google inaorodhesha toleo la simu, na watumiaji wa simu wanataka taarifa ile ile.
• Kuzima kukuza kwenye tagi ya viewport.
• Picha za ukubwa wa eneo-kazi kwenye simu, zinazogharimu muda wa kupakia na data.
• Vipengele vilivyowekwa vinavyorundikana: kichwa kinachobaki juu, bango la vidakuzi na kiputo cha gumzo vinaweza kufunika nusu ya skrini ya simu.
• Madirisha ibukizi yasiyoweza kufungwa kwenye skrini ndogo kwa sababu kitufe cha kufunga kiko nje ya skrini.

Orodha ya ukaguzi wa simu

• Tagi ya viewport ipo; kukuza hakujazimwa
• Hakuna kusogea pembeni kwa upana wa 320px kwenye kurasa zote
• Maandishi ya mwili ~16px; ingizo halisababishi kukuza
• Malengo ya kugusa ni makubwa vya kutosha na yametenganishwa
• Menyu inafanya kazi kwenye simu na kwa kibodi
• Majedwali yanasomeka kwenye simu (kadi, safu chache au kontena la kusogeza)
• Picha na embeds zinajirekebisha; faili za ukubwa sahihi zinatumika
• Fomu zinatumia aina sahihi za ingizo; kitufe cha kutuma kinafikika
• Hakuna kitu muhimu kinachotegemea hover
• Imejaribiwa kwenye simu halisi angalau moja

Mpangilio unaojirekebisha pia ni sehemu ya ufikivu: WCAG inataka maudhui yafanye kazi kwa upana wa 320px na kwa ukuzaji wa 200%. Ikiwa unajenga programu ambayo watu watatumia kila siku kwenye simu zao, jinsi ya kujenga programu ya wavuti inayofaa simu inaenda mbali zaidi, ikijumuisha PWA zinazoweza kusakinishwa.

Muundo unaojirekebisha kwenye Mythex

Mythex inajenga programu za wavuti zinazojirekebisha, na kwenye Pro inaweza kuzifunga kama programu za Android na iPhone. Kwenye nafasi ya kazi, bofya ikoni ya simu juu ya Preview (Switch to Mobile) ili kuona programu yako kwenye fremu ya ukubwa wa simu, na buruta ukingo wa fremu kujaribu upana mwingine (Preview na Code). Nyaraka zina kiolezo kifupi cha kuanzia cha kurekebisha mpangilio wa skrini ndogo katika maagizo ya mpangilio wa simu. Kagua pia kwenye simu halisi — fungua URL iliyochapishwa, au shiriki kiungo cha onyesho na ukifungue kwenye simu yako.

Maswali