ምላሽ ሰጪ ተመልካች አሁኑን ድረ-ገጽ በብዙ መሳሪያ viewport መጠኖች ጎን ለጎን ያሳያል — ሁሉም በአንድ ማያ ገጽ ላይ። ንድፍዎ በ iPhone፣ iPad፣ Android ስልኮች፣ ላፕቶፖች እና ዴስክቶፖች ላይ በአንድ ጊዜ እንዴት እንደሚመስል ይመልከቱ። አንድ viewport ያሸብልሉ ሁሉም ሌሎች ይከተላሉ።
ተጣጣፊ (responsive) ዲዛይኖችን መሞከር ባህላዊ በሆነ መንገድ የብራውዘር መስኮትን መጠን መቀየር ወይም የDevTools device toolbar ን በመጠቀም በአንድ ጊዜ አንድ viewport መጠን መቀያየርን ይጠይቃል። ይህ ይሰራል፣ ነገር ግን በአንድ ጊዜ አንድ መጠን ብቻ ማየት ትችላለህ — ይህም አንድ ክፍል በሞባይል እና በዴስክቶፕ ላይ በተመሳሳይ ጊዜ እንዴት እንደሚታይ ማወዳደር የማይቻል ያደርገዋል። Responsive Viewer ገጹን በአንድ ጊዜ በበርካታ viewports ውስጥ በማሳየት፣ በስክሪንህ ላይ ጎን ለጎን በማሳየት ይህንን ይፈታል።
ከቅድመ-ተዘጋጁ የመሳሪያ ፕሮፋይሎች (iPhone 15, iPad Pro, Pixel 8, MacBook, 1440p Desktop) ውስጥ ምረጥ ወይም ብጁ መጠኖችን አስገባ። እያንዳንዱ viewport ሙሉ በሙሉ የተሰራ የገጹ instance ነው፣ የማይንቀሳቀስ ስክሪንሾት አይደለም — አንዱን ስታሸበልል ሁሉም ሌሎች ወደ ተመሳሳይ ቦታ ያሸበልላሉ። ይህ synchronized scrolling በአንድ እይታ ተመሳሳዩን የይዘት ቦታ በሁሉም የመሳሪያ መጠኖች ላይ እንድታወዳድር ያስችልሃል።
Responsive ችግሮችን ለማግኘት ፈጣኑ መንገድ ነው፦ በስህተት የሚጠቀለል navigation፣ ከመያዣቸው ውጭ የሚፈሱ ምስሎች፣ በትንንሽ ስክሪኖች ላይ ሊነበብ የማይችል ጽሁፍ፣ ወይም ባልተስተካከለ መንገድ የሚደረመስ ስፔሲንግ። እያንዳንዱ viewport በተናጠል በportrait እና landscape መካከል ሊሽከረከር ይችላል፣ ይህም ለtablets እና foldables ሁለቱም አቅጣጫዎች የተለመዱ እውነተኛ ሁኔታዎች ስለሆኑ አስፈላጊ ነው። የምትጨምራቸው ብጁ viewport መጠኖች ለቀጣይ session ትውስታ ውስጥ ይቀመጣሉ፣ ስለዚህ የፕሮጀክት ልዩ breakpoint ስብስብ መሳሪያውን በምትከፍትበት በእያንዳንዱ ጊዜ እንደገና መግባት አያስፈልገውም።
አሁኑን ገጽ ጎን ለጎን በተሰጡ ብዙ viewport መጠኖች በአንድ ጊዜ ይመልከቱ። ሞባይል፣ ታብሌት እና ዴስክቶፕ አቀማመጦችን በአንድ እይታ ያወዳድሩ።
ከታዋቂ መሳሪያ ቅድመ-ምርጫዎች ይምረጡ — iPhone 15 (393×852)፣ iPhone SE (375×667)፣ iPad (820×1180)፣ Pixel 8 (412×915)፣ MacBook Pro (1440×900)።
ስታንዳርድ ያልሆኑ viewport መጠኖችን ለመፈተሽ ማንኛውንም ብጁ ስፋት እና ቁመት ያስገቡ። ብዙ ብጁ viewports ከቅድመ-ምርጫዎች ጋር ይጨመራሉ።
አንድ viewport ያሸብልሉ ሁሉም ሌሎች ተመሳሳይ ቁመት ቦታ ይሸበልላሉ። ተመሳሳይ ይዘት ክፍል ከሁሉም መሳሪያ መጠኖች ጋር በአንድ ጊዜ ያወዳድሩ።
ማንኛውም viewport ገሃድ መሳሪያ ፍሬም ውስጥ ይታያል — ስልክ ጠርዞች፣ ታብሌት ድንበሮች፣ ላፕቶፕ chrome። ምስላዊ አውድ ግምገማዎች ወቅት ይረዳል።
ተኮር መጠን ንጽጽሮች ላይ ለማተኮር የግለሰብ መሳሪያዎችን ያብሩ ያጥፉ። ሞባይል እና ዴስክቶፕ ብቻ ያወዳድሩ? ታብሌት ቅድመ-ምርጫዎች ያጥፉ።
ምላሽ ሰጪ ንድፍ ከተተገበረ በኋላ ማንኛውም ክፍል ሁሉም ዒላማ መሳሪያ መጠኖች ላይ ትክክል እንደሚመስል ያረጋግጡ።
ግምገማ ስብሰባ ወቅት ድረ-ገጽ ከመሳሪያዎች ጋር እንዴት እንደሚመስል ለደንበኞች ያሳዩ — ጎን-ለጎን እይታ ወዲያውኑ ይረዳል።
ተኮር ፒክሰል ስፋት ላይ አቀማመጥ ይሰበራል? ችግሩ ያለበት ስፋት ላይ ብጁ viewport ይጨምሩ ከትንሽ ሰፊና ጠባብ viewports ጋር ያወዳድሩ።
ረዥም ርዕሶች በሞባይል ላይ በትክክል እንደሚጠቅሉ፣ ሰንጠረዦች ሊሸበለሉ እንደሚችሉ፣ ቅጽ ግቤቶች ለመንካት በቂ ትልቅ እንደሆኑ ይፈትሹ።
ንድፍዎን 3-4 መሳሪያ መጠኖች ላይ ያሳያል ለፖርትፎሊዮ ቀረጻዎች አሳማኝ ምላሽ ሰጪ ንድፍ showcase ምስሎች ለመፍጠር ባለብዙ-መሳሪያ እይታ ይጠቀሙ።
የ DevSuite Pro ተንሳፋፊ ዶክ ይክፈቱ እና ምላሽ ሰጪ ተመልካች አዶን ጠቅ ያድርጉ።
ከላይ ያለው መሳሪያ አሞሌ ያሉ ቅድመ-ምርጫዎችን ያሳያል (iPhone፣ iPad፣ Pixel፣ MacBook)። ለማብራት/ለማጥፋት ጠቅ ያድርጉ።
ብጁ viewport ለመጨመር "ብጁ" ጠቅ ያድርጉ ተኮር ስፋት × ቁመት ያስገቡ።
ማንኛውንም viewport ያሸብልሉ — ሁሉም ሌሎች ተመሳሳይ ቦታ ይከተላሉ። ተመሳሳይ ክፍል ከሁሉም መጠኖች ጋር ያወዳድሩ።
ወደ መደበኛ ነጠላ-ገጽ እይታ ለመመለስ ምላሽ ሰጪ ተመልካች አዶ ወይም ዝጋ ቁልፍ ጠቅ ያድርጉ።
DevSuite Pro ን በነፃ ይጫኑ እና 64+ የገንቢ መሳሪያዎችን ለአሳሽዎ ይክፈቱ።
