Kitazamaji cha Mwitikio kinaonyesha ukurasa wa sasa katika ukubwa mbalimbali wa viewport bega kwa bega.
Kitazamaji cha Mwitikio kinaonyesha ukurasa wa sasa katika ukubwa mbalimbali wa viewport bega kwa bega.
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.
