Kitazamaji cha Mwitikio kinaonyesha ukurasa wa sasa katika ukubwa mbalimbali wa viewport bega kwa bega.
Kujaribu miundo ya responsive kwa kawaida kunamaanisha kubadilisha ukubwa wa dirisha la kivinjari au kutumia device toolbar ya DevTools kubadilisha kati ya vipimo vya viewport moja baada ya nyingine. Hii inafanya kazi, lakini unaweza kuona ukubwa mmoja tu kwa wakati — jambo linalofanya iwe haiwezekani kulinganisha jinsi sehemu fulani inavyoonekana kwenye mobile dhidi ya desktop kwa wakati mmoja. Responsive Viewer inatatua hili kwa kuonyesha ukurasa katika viewports nyingi kwa wakati mmoja, zikionyeshwa bega kwa bega kwenye skrini yako.
Chagua kutoka kwenye device profiles zilizowekwa tayari (iPhone 15, iPad Pro, Pixel 8, MacBook, 1440p Desktop) au weka vipimo vyako maalum. Kila viewport ni nakala kamili inayotolewa (rendered) ya ukurasa, si picha tuli — sogeza moja na zote nyingine zinasogea hadi nafasi ileile. Kusogeza huku kwa pamoja (synchronized scrolling) kunakuruhusu kulinganisha eneo lilelile la maudhui katika vipimo vyote vya vifaa kwa mtazamo mmoja.
Ni njia ya haraka zaidi ya kubaini matatizo ya responsive: navigation inayojikunja vibaya, picha zinazozidi containers zake, maandishi yanayoshindwa kusomeka kwenye skrini ndogo, au nafasi zinazoporomoka kwa namna isiyofaa. Kila viewport inaweza kuzungushwa kati ya portrait na landscape kwa kujitegemea, jambo linalojalisha kwa tablets na foldables ambapo mielekeo yote miwili ni hali za kawaida za matumizi halisi. Vipimo maalum vya viewport unavyoongeza vinakumbukwa kwa kikao chako kijacho, hivyo seti mahususi ya breakpoints za mradi haihitaji kuwekwa upya kila unapofungua zana hiyo.
Angalia ukurasa wa sasa ukitolewa (rendered) kwa wakati mmoja katika ukubwa mbalimbali wa viewport ulioonyeshwa bega kwa bega kwenye skrini yako. Linganisha mipangilio ya simu, tablet, na desktop kwa mtazamo mmoja bila kubadilisha kati ya mionekano. Kila viewport ni toleo linalofanya kazi kikamilifu la ukurasa.
Chagua kutoka kwa maktaba ya mipangilio ya vifaa maarufu: iPhone 15 (393×852), iPhone SE (375×667), iPad (820×1180), iPad Pro (1024×1366), Pixel 8 (412×915), MacBook Pro (1440×900), na Full HD Desktop (1920×1080). Mipangilio inasasishwa na vipimo vya sasa vya vifaa.
Ingiza upana na urefu wowote maalum ili kupima ukubwa wa viewport usio wa kawaida. Unahitaji kuangalia jinsi ukurasa unavyoonekana kwa upana wa 768px haswa (breakpoint ya kawaida ya tablet)? Iandike tu. Viewports nyingi maalum zinaweza kuongezwa pamoja na mipangilio iliyopo.
Sogeza viewport moja na nyingine zote zitasogea kwenye nafasi sawa ya wima. Hii inakuwezesha kulinganisha sehemu ileile ya maudhui katika ukubwa wote wa vifaa kwa wakati mmoja — angalia jinsi eneo la hero, jedwali la bei, au footer inavyoonekana kwenye simu, tablet, na desktop.
Kila viewport inaonyeshwa ndani ya fremu halisi ya kifaa — bezels za simu, kingo za tablet, miviringo ya laptop. Muktadha wa kuona husaidia washirika kuelewa ni viewport gani inayowakilisha kifaa gani wakati wa mapitio na wasilisho.
Washa au zima vifaa mmoja mmoja ili kuzingatia ulinganisho wa ukubwa maalum. Unalinganisha simu na desktop tu? Ondoa mipangilio ya tablet. Unahitaji kuona iPhones tu? Ondoa kila kitu kingine. Udhibiti kamili juu ya viewports gani zinazoonekana.
Baada ya kutekeleza muundo unaowajibika, tumia Kitazamaji cha Mwitikio kuthibitisha kuwa kila sehemu inaonekana sahihi katika ukubwa wote wa vifaa lengwa. Tambua kufurika kwa maandishi, matatizo ya kuongeza ukubwa wa picha, matatizo ya kufungwa kwa urambazaji, na kutokubaliana kwa nafasi — yote katika muonekano mmoja.
Waonyeshe wateja jinsi tovuti yao inavyoonekana kwenye vifaa mbalimbali wakati wa kikao cha mapitio. Muonekano wa bega kwa bega unaeleweka mara moja — hakuna haja ya kuelezea dhana za viewport. Wateja wanaweza kuona simu, tablet, na desktop kwa wakati mmoja.
Unaona mpangilio ukiharibika katika upana maalum? Ongeza viewport maalum katika upana sahihi wa pikseli ambapo tatizo linatokea na ulinganishe na viewports pana kidogo na nyembamba kidogo ili kutambua ni breakpoint gani ya CSS inayosababisha tatizo.
Angalia ikiwa vichwa virefu vinajikunja kwa usahihi kwenye simu, ikiwa jedwali za data zinaweza kusogezwa kwenye skrini ndogo, ikiwa sehemu za fomu ni kubwa kiasi cha kutosha kuguswa, na ikiwa CTAs zinabaki kuonekana na kufikiwa katika ukubwa wote wa vifaa.
Tumia muonekano wa vifaa vingi kuunda picha za kuvutia za kuonyesha muundo unaowajibika. Chukua picha ya skrini ya Kitazamaji cha Mwitikio ikionyesha muundo wako katika ukubwa wa vifaa 3-4 kwa ajili ya wasilisho la portfolio.
Fungua kizimbani kinachoelea cha DevSuite Pro na ubofye ikoni ya Responsive Viewer. Ukurasa unahamia kwenye hali ya viewports nyingi zenye fremu za vifaa zilizoonyeshwa bega kwa bega.
Bar ya vifaa iliyo juu inaonyesha mipangilio inayopatikana (iPhone, iPad, Pixel, MacBook, Desktop). Bofya vifaa ili kuviwasha/kuvizima. Vifaa vilivyochaguliwa vinaonekana kama viewports hapa chini.
Bofya kitufe cha "Custom" na uingize vipimo maalum vya upana × urefu ili kuongeza viewport maalum. Ni muhimu kwa kupima thamani sahihi za breakpoint kama 768px, 1024px, or 1280px.
Sogeza viewport yoyote — nyingine zote zitafuata kwenye nafasi sawa. Linganisha jinsi sehemu ileile inavyoonekana katika ukubwa wote wa vifaa vilivyochaguliwa kwa wakati mmoja.
Bofya ikoni ya Responsive Viewer tena au kitufe cha kufunga ili kutoka kwenye hali ya viewports nyingi na kurejea kwenye muonekano wa kawaida wa ukurasa mmoja.
Sakinisha DevSuite Pro bila malipo na ufungue zana 64+ za wasanidi kwa kivinjari chako.
