Sida Websaydhka Loo Dhigo Mid La Waafaqsan Telefoonka

Si aad websaydh u dhigto mid telefoonka ku habboon, ku dar tag-ga viewport meta, dhis naqshadda mobile-first oo leh ballaadhnaan la qabsan karo, oo isticmaal CSS breakpoints si aad dib ugu habayso shaashadaha waaweyn — tiirarka isku dhejinta, menu-ga isku dhufashada iyo sawirrada cabbiraya si ay u habboonaadaan. Kadibna hubi bog kasta ballaadhnaanta telefoonka si aad u aragto in la jiido dhinac, qoraal yar, iyo badhamo aad u yar oo aan la riixi karin. Websaydh AI-ga la dhisay, hal prompt cad oo iyo hal dhamaystir preview-ga shaashadda telefoonka ayaa badanaa wax badan hagaajiya.

Waa maxay naqshadda responsive-ka dhab ahaan

Websaydh responsive ah wuxuu isticmaalaa hal qaybood oo bog iyo URL ah oo la waafaqsan shaashadda. Halkii uu ka noqon lahaa websaydh "m." gooni ah, CSS-ku wuxuu beddelaa naqshadda ballaadhnaanta gaarka ah, taas oo loo yaqaan breakpoints. Dhismaha aasaasiga ah:

• Tag-ga viewport meta wuxuu u sheegaa browser-yada mobile-ka inay isticmaalaan ballaadhnaanta dhabta ah ee qalabka.
• Naqshadaha la qabsan karo waxay isticmaalaan boqolkiiba, flexbox iyo grid halkii ay ka isticmaali lahaayeen ballaadhnaan pixel go'an.
• Media queries (ama fasallada qaab-dhismeedka sida md: ee Tailwind) waxay beddelaan naqshadda ballaadhnaan la siiyay ka sare.
• Media la qabsan karo — sawirrada iyo fiidyaha oo yaraada si ay ugu habboonaadaan weelkooda.

Waxay muhiim tahay sababtoo ah taraafikkaaga badan wuxuu u badan yahay telefoonada, iyo sababtoo ah Google wuxuu indexiyaa nooca mobile-ka bogagga. Haddii nuxurka ama links-ku ku jiraan desktop-ka kaliya, Google ma arki karo.

Doorashooyin iyo is-dhaafsiin

Mobile-first badanaa way fudud tahay: tiir keliya waa naqshadda ugu fudud, tiirar ku darista markii meeshu kordhayo way ka yar tahay inaad ka saartid.

Qaybaha badanaa jabaa

Tag-ga viewport

Haddii bogga telefoonka uu u muuqdo websaydh desktop oo yar, tag-ga viewport ayaa maqan:

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

Ha ku darin maximum-scale=1 ama user-scalable=no. Joojinta pinch-zoom-ka waxay websaydhka ka dhigaysaa mid adag dadka aragtidooda hoose.

Ballaadhnaan go'an iyo jiidista dhinac

Cilladda ugu badan ee responsive-ka waa wax ka ballaadhan shaashadda: weelka width: 1200px ee go'an, miis ballaadhan, URL dheer ama block code, sawir aan max-width: 100% lahayn. Bogga oo dhan ayaa markaas dhinac u jiidma. Isticmaal max-width halkii width, u daa qoraalku inuu soo laabto, oo sheeg waxyaabaha ballaadhan goob scroll u gaar ah.

Navigation

Shan link oo desktop menu ah ma inta badan ku habboonaadaan telefoonka. Jawaabta caadiga ah waa badhan menu ah oo furta panel. Hay laba ama saddex ficil ugu muhiimsan oo muuqda — "Book", "Cart", "Sign in" — oo hubi in menu-gu keyboard-ka ku shaqeeyo oo si fudud u xidhmo.

Qoraalka iyo bartilmaameedka riixista

• Qoraalka jirka qiyaastii 16 px waa inta ugu yar ee macquul ah telefoonada. Inputs-ka qoraal yar leh ayaa iPhone-ka ku kiciya inuu weynaado markii la taabto.
• Ka dhig badhamada iyo links-ka kuwo fudud in la taabto. WCAG 2.2 AA wuxuu dejiyaa heer hoose oo ah 24 x 24 CSS pixel (ama baaxad kafiil ah); qiyaastii 44 pixel way ka raaxo badan tahay faraha.
• Ka tag meel u dhexeysa links-ka ku xiga si dadku uusan u taabanin midka qaldan.

Miisaska iyo xogta

Miisaska ballaadhka ah ayaa ah qaybta ugu adag ee app responsive ah. Ikhtiyaaraadka, iyada oo loo kala horeeyo: tus tiirar yar telefoonada, ka dhig safmo kasta kaarar, ama geli miiska weel kuwa dhinac u scroll-garayn kara oo tiirka ugu horeeya la xidhay. Dooro iyadoo lagu salaynayo waxa dadku u baahan yihiin inay isbarbardhigaan.

Sawirrada iyo media

Isticmaal max-width: 100% iyo height: auto, u dir faylal yar shaashadaha yaryar srcset ku, oo dej width iyo height si looga fogaado kicida naqshadda. Fiidyaha la dhex geliyay iyo khariidadaha waxay u baahan yihiin wrapper responsive ah si ay u ilaaliyaan saamiga. Sawirrada yaryar ayaa sidoo kale bogagga dhaqsiyaa — eeg sida loo dhigo websaydhkaaga mid dhaqso badan.

Foomamka

Ku tuur labels-ka foomamka kor, ka dhig meelaha gelinta oo dhan ballaadhnaan buuxa, oo isticmaal nooca gelinta saxda ah (type="email", type="tel", inputmode="numeric") si telefoonadu u muujiyaan kiiboodhka ku habboon. Badhanka gudbinta geli meel ay faraha gaari karaan oo ha ka dhigin mid ka dhuma marka kiiboodhku furmo.

Falal hover-ka keliya ah

Telefoonadu ma hover-ayaan. Tooltips, dropdowns iyo preview-yada oo kaliya hover-ka ku muuqda ma arko isticmaalayaasha taabta. Ka dhig inay sidoo kale tap-ka ku shaqeeyaan.

Prompts-ka shaqeeya

Dhismaha cusub, sheeg hore:

Dhis tan mobile-first. Hal tiir telefoonada, laba tiir tablet-ka ka bilaabo, naqshad buuxa desktop-ka. Ma jiro jiidista dhinac 320 px ballaadhka, qoraalka jirka ugu yaraan 16 px, bartilmaameedka riixista ugu yaraan 44 px, menu badan shaashadaha yaryar, iyo miisaska oo kaarar ka dhigaya telefoonada.

Bog jira, sharax waxa aad aragto:

Telefoonada, bogga /pricing wuu dhinac u jiidmaa oo saddexda kaarka qorshaha ayaa isku dhex jira. Kaararka sare u dhig ka hoosaysa 768 px, miiska isbarbardhigga ha uga jiido dhinac weelkiisa gaarka ah, tiirka astaamaha ha la xidho, oo naqshadda desktop-ka ha ku sii jirto sida ay tahay.

Hubi bog kasta ballaadhka 375 px. Liiska wax kasta oo ka baxa, isku dhaca, qoraal ka yar 16 px ama bartilmaameed ka yar 44 px, ama kaliya hover-ka ku shaqeeya, kadibna hagaaji mid kasta.

Tallaabo tallaabo

1. Xaqiiji tag-ga viewport inuu ku jiro madasha bogga.
2. Tijaabi 320–375 px ballaadhka browser-ka device mode ama preview shaashad telefoon ah. Scroll bog kasta sare ilaa hoose.
3. Marka hore hagaaji jiidista dhinac. Hel curiyaha wax ka ballaadhan; wax kale way adag tahay in la xukumo ilaa ay dhammaato.
4. Hagaaji navigation-ka: badhanka menu-ga, ficillada muhiimka ah oo muuqda.
5. Hubi qoraalka, bartilmaameedka riixista iyo foomamka socodka muhiimka ah kasta — diiwaangelin, raadin, checkout, xiriir.
6. Maamul miisaska iyo media: kaarar ama goobo scroll, sawirro iyo embeds responsive ah.
7. Hubi cabbirrada dhexe. Ballaadhnaanta si tartiib ah ugu jiid telefoonka ilaa desktop; naqshaddu badanaa way jabtaa ku dhawaad ballaadhnaanta tablet-ka.
8. Tijaabi telefoon dhab ah. Emulators-ku waxay ka luntaan waxyaabo sida kiiboodhka shaashadda oo badhanka daboosha, xaddaadhka, iyo dareenka dhakhsaha ee websaydhku ku leeyahay xogta mobile-ka.

Khaladaadka caadiga ah

• In la tijaabiyo hal cabbir telefoon oo keliya. Hubi telefoon yar, telefoon weyn iyo tablet.
• In nuxurka telefoonka laga qariyo si uu u habboonaado. Google wuxuu indexiyaa nooca mobile-ka, isticmaalayaasha telefoonku waxay doonayaan macluumaad isku mid ah.
• In zoom-ka la damiyo tag-ga viewport.
• Sawirro cabbirka desktop ah telefoonada, kuwaas oo qaali ka ah waqtiga soo dejinta iyo xogta.
• Waxyaabo go'an oo isku kaydsan: header-ka sticky-ga ah, banner-ka cookie-ga iyo bubble-ka chat-ka ayaa qari kara badhka shaashadda telefoonka.
• Pop-ups aan la xidhi karin shaashad yar, sababtoo ah badhanka xidhidha ayaa ka baxsan shaashadda.

Liiska mobile-ka

• Tag-ga viewport meta wuu jiraa; zoom-ka lama joojin
• Ma jiro jiidista dhinac 320 px bog kasta
• Qoraalka jirka ~16 px; inputs-ku ma kiciyaan zoom
• Bartilmaameedyada riixista way weyn yihiin oo kala fogaadaan
• Menu-gu telefoonada iyo keyboard-ka way shaqeeyaan
• Miisaska telefoonada waa la akhriyi karaa (kaarar, tiirar yar ama goob scroll)
• Sawirrada iyo embeds way cabbiraan; faylal cabbir saxda ah ayaa la adeegaa
• Foomamku waxay isticmaalaan nooca gelinta saxda ah; badhanka gudbinta waa la gaadhi karaa
• Waxba muhiim ah ma ku xidhna hover-ka
• Waa la tijaabiyay ugu yaraan hal telefoon dhab ah

Naqshadda responsive-ka waa qayb ka mid ah helitaanka: WCAG wuxuu rabaa in nuxurku shaqeeyo 320 px ballaadhka iyo 200% zoom. Haddii aad dhisayso app dadku maalin walba ku isticmaalaan telefoonadooda, sida loo dhiso web app la isticmaali karo telefoonka waxay dhaafsiisaa, oo ay ku jiraan PWAs la rakibi karo.

Naqshadda responsive-ka ee Mythex

Mythex wuxuu dhisaa web apps responsive ah, Pro-na wuxuu ku duubi karaa iyagoo app Android iyo iPhone ah. Workspace-ka, guji sawirka telefoonka ee ka sarreeya Preview (Switch to Mobile) si aad app-kaaga ugu aragto frame cabbir telefoon, oo jiid geeska frame-ka si aad ballaadhnaanno kale isku daydo (Preview and Code). Dukumentiyadu waxay leedahay prompt bilow oo gaaban oo lagu hagaajiyo naqshadda shaashadaha yaryar prompts-ka mobile-responsive. Telefoon dhab ah ku hubi sidoo kale — fur URL-ka la daabacay, ama wadaag link preview ah oo ku fur telefoonkaaga.

Su'aalaha