ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಮೊಬೈಲ್‌ಗೆ ಹೊಂದುವಂತೆ ಮಾಡುವುದು ಹೇಗೆ

ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಮೊಬೈಲ್‌ಗೆ ಹೊಂದುವಂತೆ ಮಾಡಲು, ವ್ಯೂಪೋರ್ಟ್ meta ಟ್ಯಾಗ್ ಸೇರಿಸಿ, ಲೇಔಟ್ ಅನ್ನು ಹೊಂದಿಕೊಳ್ಳುವ ಅಗಲಗಳೊಂದಿಗೆ ಮೊಬೈಲ್-ಮೊದಲು ನಿರ್ಮಿಸಿ, ಮತ್ತು ದೊಡ್ಡ ಪರದೆಗಳಲ್ಲಿ ಅದನ್ನು ಮರುಜೋಡಿಸಲು CSS ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಬಳಸಿ — ಕಾಲಮ್‌ಗಳನ್ನು ಒಂದರ ಕೆಳಗೆ ಒಂದು ಇಡುವುದು, ಮೆನು ಮಡಚುವುದು ಮತ್ತು ಚಿತ್ರಗಳನ್ನು ಹೊಂದಿಸುವುದು. ನಂತರ ಪ್ರತಿ ಪುಟವನ್ನು ಫೋನ್ ಅಗಲದಲ್ಲಿ ಪರಿಶೀಲಿಸಿ: ಅಡ್ಡಲಾಗಿ ಸ್ಕ್ರೋಲ್ ಆಗುವುದು, ಚಿಕ್ಕ ಪಠ್ಯ, ಟ್ಯಾಪ್ ಮಾಡಲು ತುಂಬಾ ಚಿಕ್ಕ ಬಟನ್‌ಗಳು. AI ನಿರ್ಮಿಸಿದ ಸೈಟ್‌ನಲ್ಲಿ, ಒಂದು ಸ್ಪಷ್ಟ ಪ್ರಾಂಪ್ಟ್ ಜೊತೆಗೆ ಫೋನ್-ಗಾತ್ರದ ಪೂರ್ವವೀಕ್ಷಣೆಯಲ್ಲಿ ಒಂದು ಪರಿಶೀಲನೆ ಸಾಮಾನ್ಯವಾಗಿ ಹೆಚ್ಚಿನದನ್ನು ಸರಿಪಡಿಸುತ್ತದೆ.

ಹೊಂದಾಣಿಕೆಯ ವಿನ್ಯಾಸ ನಿಜವಾಗಿ ಏನು

ಹೊಂದಾಣಿಕೆಯ ಸೈಟ್ ಪರದೆಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ಒಂದೇ ಪುಟಗಳು ಮತ್ತು URL ಗಳ ಸೆಟ್ ಬಳಸುತ್ತದೆ. ಪ್ರತ್ಯೇಕ "m." ಸೈಟ್ ಬದಲು, CSS ನಿರ್ದಿಷ್ಟ ಅಗಲಗಳಲ್ಲಿ ಲೇಔಟ್ ಬದಲಿಸುತ್ತದೆ, ಇವುಗಳನ್ನು ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು ಎನ್ನಲಾಗುತ್ತದೆ. ಮೂಲ ಅಂಶಗಳು:

ವ್ಯೂಪೋರ್ಟ್ meta ಟ್ಯಾಗ್ ಮೊಬೈಲ್ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಸಾಧನದ ನಿಜವಾದ ಅಗಲವನ್ನು ಬಳಸಲು ಹೇಳುತ್ತದೆ.
ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್‌ಗಳು ಸ್ಥಿರ ಪಿಕ್ಸೆಲ್ ಅಗಲಗಳ ಬದಲು ಶೇಕಡಾವಾರು, flexbox ಮತ್ತು grid ಬಳಸುತ್ತವೆ.
ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು (ಅಥವಾ Tailwind ನ md: ನಂತಹ ಫ್ರೇಮ್‌ವರ್ಕ್ ಕ್ಲಾಸ್‌ಗಳು) ನಿರ್ದಿಷ್ಟ ಅಗಲಕ್ಕಿಂತ ಮೇಲೆ ಲೇಔಟ್ ಬದಲಿಸುತ್ತವೆ.
ಹೊಂದಿಕೊಳ್ಳುವ ಮಾಧ್ಯಮ — ತಮ್ಮ ಕಂಟೇನರ್‌ಗೆ ಹೊಂದಲು ಕುಗ್ಗುವ ಚಿತ್ರಗಳು ಮತ್ತು ವೀಡಿಯೊ.

ಇದು ಮುಖ್ಯ ಏಕೆಂದರೆ ನಿಮ್ಮ ಟ್ರಾಫಿಕ್‌ನ ಬಹಳಷ್ಟು ಫೋನ್‌ಗಳಲ್ಲಿ ಇರಬಹುದು, ಮತ್ತು Google ನಿಮ್ಮ ಪುಟಗಳ ಮೊಬೈಲ್ ಆವೃತ್ತಿಯನ್ನು ಸೂಚಿಸುತ್ತದೆ. ವಿಷಯ ಅಥವಾ ಲಿಂಕ್‌ಗಳು ಡೆಸ್ಕ್‌ಟಾಪ್‌ನಲ್ಲಿ ಮಾತ್ರ ಇದ್ದರೆ, Google ಸಹ ಅವನ್ನು ನೋಡದಿರಬಹುದು.

ಆಯ್ಕೆಗಳು ಮತ್ತು ವ್ಯಾಪಾರ-ವಿನಿಮಯ

ವಿಧಾನ	ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ	ಯಾವುದಕ್ಕೆ ಒಳ್ಳೆಯದು	ವ್ಯಾಪಾರ-ವಿನಿಮಯ
ಮೊಬೈಲ್-ಮೊದಲ ಹೊಂದಾಣಿಕೆ	ಫೋನ್‌ಗಳಿಗೆ ಮೂಲ ಶೈಲಿಗಳು, ನಂತರ ದೊಡ್ಡ ಪರದೆಗಳಿಗೆ ಲೇಔಟ್ ಸೇರಿಸಿ	ಹೊಸ ಸೈಟ್‌ಗಳು ಮತ್ತು ಆ್ಯಪ್‌ಗಳು (ಶಿಫಾರಸು)	ಮೊದಲು ಸಣ್ಣದಾಗಿ ಯೋಚಿಸುವ ಅಗತ್ಯ
ಡೆಸ್ಕ್‌ಟಾಪ್-ಮೊದಲ ಹೊಂದಾಣಿಕೆ	ಡೆಸ್ಕ್‌ಟಾಪ್ ಶೈಲಿಗಳು, ನಂತರ ಚಿಕ್ಕ ಪರದೆಗಳಿಗೆ ಓವರ್‌ರೈಡ್	ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಡೆಸ್ಕ್‌ಟಾಪ್ ಸೈಟ್ ಅನ್ನು ಮರುಹೊಂದಿಸುವುದು	ಹೆಚ್ಚು ಓವರ್‌ರೈಡ್‌ಗಳು; ಮೊಬೈಲ್ ಚಿಂತನೆಯ ನಂತರದಂತೆ ಭಾಸವಾಗುತ್ತದೆ
ಪ್ರತ್ಯೇಕ ಮೊಬೈಲ್ ಸೈಟ್	ಫೋನ್‌ಗಳಿಗೆ ಬೇರೆ URL ಗಳು	ಇಂದು ಅಪರೂಪಕ್ಕೆ ಸಮರ್ಥನೀಯ	ಎರಡು ಸೈಟ್‌ಗಳ ನಿರ್ವಹಣೆ, SEO ಸಂಕೀರ್ಣತೆಗಳು
ಪ್ರೊಗ್ರೆಸ್ಸಿವ್ ವೆಬ್ ಆ್ಯಪ್ (PWA)	ಮುಖಪುಟ ಪರದೆಗೆ ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಬಹುದಾದ ಹೊಂದಾಣಿಕೆಯ ಸೈಟ್	ಆಗಾಗ್ಗೆ ಬಳಸುವ ಆ್ಯಪ್-ತರದ ಉಪಕರಣಗಳು	ಹೆಚ್ಚುವರಿ ಸೆಟಪ್; ನೇಟಿವ್ ಮತ್ತು ಪ್ರೊಗ್ರೆಸ್ಸಿವ್ ವೆಬ್ ಆ್ಯಪ್‌ಗಳು ನೋಡಿ

ಮೊಬೈಲ್-ಮೊದಲು ಸಾಮಾನ್ಯವಾಗಿ ಸರಳ: ಒಂದೇ ಕಾಲಮ್ ಸುಲಭ ಲೇಔಟ್, ಮತ್ತು ಜಾಗ ಬೆಳೆದಂತೆ ಕಾಲಮ್ ಸೇರಿಸುವುದು, ಅವನ್ನು ತೆಗೆದುಹಾಕುವುದಕ್ಕಿಂತ ಕಡಿಮೆ ಕೆಲಸ.

ಸಾಮಾನ್ಯವಾಗಿ ಮುರಿಯುವ ಭಾಗಗಳು

ವ್ಯೂಪೋರ್ಟ್ ಟ್ಯಾಗ್

ಪುಟ ಫೋನ್‌ನಲ್ಲಿ ಚಿಕ್ಕ ಡೆಸ್ಕ್‌ಟಾಪ್ ಸೈಟ್‌ನಂತೆ ಕಾಣಿಸಿದರೆ, ವ್ಯೂಪೋರ್ಟ್ ಟ್ಯಾಗ್ ಇಲ್ಲ:

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

maximum-scale=1 ಅಥವಾ user-scalable=no ಸೇರಿಸಬೇಡಿ. ಪಿಂಚ್-ಜೂಮ್ ನಿರ್ಬಂಧಿಸುವುದು ಕಡಿಮೆ ದೃಷ್ಟಿ ಇರುವ ಜನರಿಗೆ ಸೈಟ್ ಬಳಸಲು ಕಷ್ಟವಾಗಿಸುತ್ತದೆ.

ಸ್ಥಿರ ಅಗಲಗಳು ಮತ್ತು ಅಡ್ಡ ಸ್ಕ್ರೋಲ್

ಸಾಮಾನ್ಯ ಹೊಂದಾಣಿಕೆಯ ದೋಷ ಪರದೆಗಿಂತ ಅಗಲವಾದದ್ದು: ಸ್ಥಿರ width: 1200px ಕಂಟೇನರ್, ಅಗಲ ಟೇಬಲ್, ಉದ್ದ URL ಅಥವಾ ಕೋಡ್ ಬ್ಲಾಕ್, max-width: 100% ಇಲ್ಲದ ಚಿತ್ರ. ಆಗ ಇಡೀ ಪುಟ ಅಡ್ಡಲಾಗಿ ಸ್ಕ್ರೋಲ್ ಆಗುತ್ತದೆ. width ಬದಲು max-width ಬಳಸಿ, ಪಠ್ಯ ಸುತ್ತಿಕೊಳ್ಳಲು ಬಿಡಿ, ಮತ್ತು ಅಗಲ ವಸ್ತುಗಳಿಗೆ ತಮ್ಮದೇ ಸ್ಕ್ರೋಲ್ ಪ್ರದೇಶ ನೀಡಿ.

ನ್ಯಾವಿಗೇಷನ್

ಐದು ಡೆಸ್ಕ್‌ಟಾಪ್ ಮೆನು ಲಿಂಕ್‌ಗಳು ಫೋನ್‌ನಲ್ಲಿ ಅಪರೂಪವಾಗಿ ಹೊಂದುತ್ತವೆ. ಸಾಮಾನ್ಯ ಉತ್ತರ ಒಂದು ಫಲಕ ತೆರೆಯುವ ಮೆನು ಬಟನ್. ಅತ್ಯಂತ ಮುಖ್ಯವಾದ ಎರಡು ಅಥವಾ ಮೂರು ಕ್ರಿಯೆಗಳನ್ನು — "ಬುಕ್", "ಕಾರ್ಟ್", "ಸೈನ್ ಇನ್" — ಗೋಚರವಾಗಿಡಿ, ಮತ್ತು ಮೆನು ಕೀಬೋರ್ಡ್‌ನಿಂದ ಕೆಲಸ ಮಾಡಿ ಸುಲಭವಾಗಿ ಮುಚ್ಚುವಂತೆ ಇರಲಿ.

ಪಠ್ಯ ಮತ್ತು ಟ್ಯಾಪ್ ಗುರಿಗಳು

ಫೋನ್‌ಗಳಲ್ಲಿ ಮುಖ್ಯ ಪಠ್ಯಕ್ಕೆ ಸುಮಾರು 16 px ಸಮಂಜಸ ಕನಿಷ್ಠ. ಚಿಕ್ಕ ಪಠ್ಯದ ಇನ್‌ಪುಟ್‌ಗಳು ಟ್ಯಾಪ್ ಮಾಡಿದಾಗ iPhone ಗಳು ಜೂಮ್ ಮಾಡುತ್ತವೆ.
ಬಟನ್‌ಗಳು ಮತ್ತು ಲಿಂಕ್‌ಗಳನ್ನು ಸುಲಭವಾಗಿ ಒತ್ತಲು ಸಾಧ್ಯವಾಗಿಸಿ. WCAG 2.2 AA ಕನಿಷ್ಠ 24 ರಿಂದ 24 CSS ಪಿಕ್ಸೆಲ್ (ಅಥವಾ ಸಾಕಷ್ಟು ಅಂತರ) ಎಂದು ನಿಗದಿಪಡಿಸುತ್ತದೆ; ಸುಮಾರು 44 ಪಿಕ್ಸೆಲ್ ಹೆಬ್ಬೆರಳುಗಳಿಗೆ ಹೆಚ್ಚು ಆರಾಮದಾಯಕ.
ಪಕ್ಕದ ಲಿಂಕ್‌ಗಳ ನಡುವೆ ಅಂತರ ಬಿಡಿ, ಜನರು ತಪ್ಪಾದದ್ದನ್ನು ಒತ್ತದಂತೆ.

ಟೇಬಲ್‌ಗಳು ಮತ್ತು ಡೇಟಾ

ಅಗಲ ಟೇಬಲ್‌ಗಳು ಹೊಂದಾಣಿಕೆಯ ಆ್ಯಪ್‌ನ ಕಠಿಣ ಭಾಗ. ಆದ್ಯತೆಯ ಕ್ರಮದಲ್ಲಿ ಆಯ್ಕೆಗಳು: ಫೋನ್‌ಗಳಲ್ಲಿ ಕಡಿಮೆ ಕಾಲಮ್‌ಗಳನ್ನು ತೋರಿಸಿ, ಪ್ರತಿ ಸಾಲನ್ನು ಕಾರ್ಡ್ ಮಾಡಿ, ಅಥವಾ ಮೊದಲ ಕಾಲಮ್ ಪಿನ್ ಮಾಡಿದ ಅಡ್ಡಲಾಗಿ ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಟೇಬಲ್ ಇರಿಸಿ. ಜನರು ಏನನ್ನು ಹೋಲಿಸಬೇಕು ಎಂಬುದರ ಆಧಾರದ ಮೇಲೆ ಆರಿಸಿ.

ಚಿತ್ರಗಳು ಮತ್ತು ಮಾಧ್ಯಮ

max-width: 100% ಮತ್ತು height: auto ಬಳಸಿ, srcset ಜೊತೆ ಚಿಕ್ಕ ಪರದೆಗಳಿಗೆ ಚಿಕ್ಕ ಫೈಲ್‌ಗಳನ್ನು ನೀಡಿ, ಮತ್ತು ಲೇಔಟ್ ಜಿಗಿತವನ್ನು ತಪ್ಪಿಸಲು ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಹೊಂದಿಸಿ. ಎಂಬೆಡ್ ಮಾಡಿದ ವೀಡಿಯೊಗಳು ಮತ್ತು ನಕ್ಷೆಗಳಿಗೆ ಆಕಾರ ಅನುಪಾತ ಉಳಿಸಲು ಹೊಂದಾಣಿಕೆಯ ರ‍್ಯಾಪರ್ ಬೇಕು. ಚಿಕ್ಕ ಚಿತ್ರಗಳು ಪುಟಗಳನ್ನು ವೇಗವಾಗಿಯೂ ಮಾಡುತ್ತವೆ — ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ವೇಗವಾಗಿಸುವುದು ಹೇಗೆ ನೋಡಿ.

ಫಾರ್ಮ್‌ಗಳು

ಲೇಬಲ್‌ಗಳನ್ನು ಕ್ಷೇತ್ರಗಳ ಮೇಲೆ ಇರಿಸಿ, ಕ್ಷೇತ್ರಗಳನ್ನು ಪೂರ್ಣ ಅಗಲಕ್ಕೆ ಮಾಡಿ, ಮತ್ತು ಸರಿಯಾದ ಇನ್‌ಪುಟ್ ಪ್ರಕಾರಗಳನ್ನು ಬಳಸಿ (type="email", type="tel", inputmode="numeric"), ಇದರಿಂದ ಫೋನ್‌ಗಳು ಸೂಕ್ತ ಕೀಬೋರ್ಡ್ ತೋರಿಸುತ್ತವೆ. ಸಲ್ಲಿಸು ಬಟನ್ ಹೆಬ್ಬೆರಳು ತಲುಪುವಲ್ಲಿ ಇರಲಿ ಮತ್ತು ಕೀಬೋರ್ಡ್ ತೆರೆದಾಗಲೂ ಗೋಚರವಿರಲಿ.

ಹೋವರ್-ಮಾತ್ರ ಸಂವಾದಗಳು

ಫೋನ್‌ಗಳಲ್ಲಿ ಹೋವರ್ ಇಲ್ಲ. ಹೋವರ್ ಮಾಡಿದಾಗ ಮಾತ್ರ ಕಾಣುವ ಟೂಲ್‌ಟಿಪ್‌ಗಳು, ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು ಮತ್ತು ಪೂರ್ವವೀಕ್ಷಣೆಗಳು ಸ್ಪರ್ಶ ಬಳಕೆದಾರರಿಗೆ ಕಾಣುವುದಿಲ್ಲ. ಟ್ಯಾಪ್ ಮಾಡಿದಾಗಲೂ ಕೆಲಸ ಮಾಡುವಂತೆ ಮಾಡಿ.

ಕೆಲಸ ಮಾಡುವ ಪ್ರಾಂಪ್ಟ್‌ಗಳು

ಹೊಸ ನಿರ್ಮಾಣಕ್ಕಾಗಿ, ಆರಂಭದಲ್ಲೇ ಹೇಳಿ:

ಇದನ್ನು ಮೊಬೈಲ್-ಮೊದಲು ನಿರ್ಮಿಸಿ. ಫೋನ್‌ಗಳಲ್ಲಿ ಒಂದೇ ಕಾಲಮ್, ಟ್ಯಾಬ್ಲೆಟ್ ಅಗಲದಿಂದ ಎರಡು ಕಾಲಮ್, ಡೆಸ್ಕ್‌ಟಾಪ್‌ನಲ್ಲಿ ಪೂರ್ಣ ಲೇಔಟ್. 320 px ಅಗಲದಲ್ಲಿ ಅಡ್ಡಲಾಗಿ ಸ್ಕ್ರೋಲ್ ಇಲ್ಲ, ಮುಖ್ಯ ಪಠ್ಯ ಕನಿಷ್ಠ 16 px, ಟ್ಯಾಪ್ ಗುರಿಗಳು ಕನಿಷ್ಠ 44 px, ಚಿಕ್ಕ ಪರದೆಗಳಲ್ಲಿ ಮೆನು ಬಟನ್, ಮತ್ತು ಫೋನ್‌ಗಳಲ್ಲಿ ಕಾರ್ಡ್‌ಗಳಾಗುವ ಟೇಬಲ್‌ಗಳು.

ಈಗಿರುವ ಪುಟಕ್ಕಾಗಿ, ನೀವು ನೋಡುವುದನ್ನು ವಿವರಿಸಿ:

ಫೋನ್‌ಗಳಲ್ಲಿ /pricing ಪುಟ ಅಡ್ಡಲಾಗಿ ಸ್ಕ್ರೋಲ್ ಆಗುತ್ತದೆ ಮತ್ತು ಮೂರು ಯೋಜನೆಯ ಕಾರ್ಡ್‌ಗಳು ಪಕ್ಕಪಕ್ಕ ಹಿಂಡಿಕೊಂಡಿವೆ. 768 px ಕೆಳಗೆ ಕಾರ್ಡ್‌ಗಳನ್ನು ಲಂಬವಾಗಿ ಇರಿಸಿ, ಹೋಲಿಕೆ ಟೇಬಲ್ ತನ್ನದೇ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಅಡ್ಡಲಾಗಿ ಸ್ಕ್ರೋಲ್ ಆಗಲಿ ಮತ್ತು ಫೀಚರ್ ಕಾಲಮ್ ಪಿನ್ ಆಗಿರಲಿ, ಡೆಸ್ಕ್‌ಟಾಪ್ ಲೇಔಟ್ ಬದಲಿಸಬೇಡಿ.

ಪ್ರತಿ ಪುಟವನ್ನು 375 px ಅಗಲದಲ್ಲಿ ಪರಿಶೀಲಿಸಿ. ಹೊರಚಾಚುವ, ಅತಿಕ್ರಮಿಸುವ, 16 px ಗಿಂತ ಚಿಕ್ಕ ಪಠ್ಯ ಅಥವಾ 44 px ಗಿಂತ ಚಿಕ್ಕ ಟ್ಯಾಪ್ ಗುರಿ ಇರುವ, ಅಥವಾ ಹೋವರ್‌ನಲ್ಲಿ ಮಾತ್ರ ಕೆಲಸ ಮಾಡುವ ಯಾವುದನ್ನೂ ಪಟ್ಟಿ ಮಾಡಿ, ನಂತರ ಪ್ರತಿಯೊಂದನ್ನೂ ಸರಿಪಡಿಸಿ.

ಹಂತ ಹಂತವಾಗಿ

ವ್ಯೂಪೋರ್ಟ್ ಟ್ಯಾಗ್ ಪುಟದ ಹೆಡ್‌ನಲ್ಲಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿ.
320–375 px ಅಗಲದಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ, ಬ್ರೌಸರ್‌ನ ಸಾಧನ ಮೋಡ್ ಅಥವಾ ಫೋನ್-ಗಾತ್ರದ ಪೂರ್ವವೀಕ್ಷಣೆಯಲ್ಲಿ. ಪ್ರತಿ ಪುಟವನ್ನು ಮೇಲಿನಿಂದ ಕೆಳಗೆ ಸ್ಕ್ರೋಲ್ ಮಾಡಿ.
ಮೊದಲು ಅಡ್ಡ ಸ್ಕ್ರೋಲ್ ಸರಿಪಡಿಸಿ. ತುಂಬಾ ಅಗಲವಾದ ಅಂಶವನ್ನು ಹುಡುಕಿ; ಅದು ಹೋಗುವವರೆಗೆ ಉಳಿದದ್ದನ್ನು ನಿರ್ಣಯಿಸುವುದು ಕಷ್ಟ.
ನ್ಯಾವಿಗೇಷನ್ ಸರಿಪಡಿಸಿ: ಮೆನು ಬಟನ್, ಮುಖ್ಯ ಕ್ರಿಯೆಗಳು ಗೋಚರ.
ಪ್ರತಿ ಮುಖ್ಯ ಹರಿವಿನಲ್ಲಿ ಪಠ್ಯ, ಟ್ಯಾಪ್ ಗುರಿಗಳು ಮತ್ತು ಫಾರ್ಮ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಿ — ಸೈನ್ ಅಪ್, ಹುಡುಕಾಟ, ಚೆಕ್‌ಔಟ್, ಸಂಪರ್ಕ.
ಟೇಬಲ್‌ಗಳು ಮತ್ತು ಮಾಧ್ಯಮವನ್ನು ನಿರ್ವಹಿಸಿ: ಕಾರ್ಡ್‌ಗಳು ಅಥವಾ ಸ್ಕ್ರೋಲ್ ಕಂಟೇನರ್‌ಗಳು, ಹೊಂದಾಣಿಕೆಯ ಚಿತ್ರಗಳು ಮತ್ತು ಎಂಬೆಡ್‌ಗಳು.
ನಡುವಿನ ಗಾತ್ರಗಳನ್ನು ಪರಿಶೀಲಿಸಿ. ಅಗಲವನ್ನು ಫೋನ್‌ನಿಂದ ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗೆ ನಿಧಾನವಾಗಿ ಎಳೆಯಿರಿ; ಟ್ಯಾಬ್ಲೆಟ್ ಅಗಲದ ಸುತ್ತ ಲೇಔಟ್‌ಗಳು ಹೆಚ್ಚಾಗಿ ಮುರಿಯುತ್ತವೆ.
ನಿಜವಾದ ಫೋನ್‌ನಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ. ಎಮ್ಯುಲೇಟರ್‌ಗಳು ಆನ್-ಸ್ಕ್ರೀನ್ ಕೀಬೋರ್ಡ್ ಬಟನ್ ಮುಚ್ಚುವುದು, ನಾಚ್‌ಗಳು ಮತ್ತು ಮೊಬೈಲ್ ಡೇಟಾದಲ್ಲಿ ಸೈಟ್ ಎಷ್ಟು ವೇಗವಾಗಿ ಅನಿಸುತ್ತದೆ ಎಂಬಂತಹ ವಿಷಯಗಳನ್ನು ತಪ್ಪಿಸುತ್ತವೆ.

ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು

ಒಂದೇ ಫೋನ್ ಗಾತ್ರದಲ್ಲಿ ಮಾತ್ರ ಪರೀಕ್ಷಿಸುವುದು. ಚಿಕ್ಕ ಫೋನ್, ದೊಡ್ಡ ಫೋನ್ ಮತ್ತು ಟ್ಯಾಬ್ಲೆಟ್ ಪರಿಶೀಲಿಸಿ.
ಹೊಂದಿಸಲು ಮೊಬೈಲ್‌ನಲ್ಲಿ ವಿಷಯವನ್ನು ಮರೆಮಾಡುವುದು. Google ಮೊಬೈಲ್ ಆವೃತ್ತಿಯನ್ನು ಸೂಚಿಸುತ್ತದೆ, ಮತ್ತು ಫೋನ್ ಬಳಕೆದಾರರಿಗೆ ಅದೇ ಮಾಹಿತಿ ಬೇಕು.
ವ್ಯೂಪೋರ್ಟ್ ಟ್ಯಾಗ್‌ನಲ್ಲಿ ಜೂಮ್ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುವುದು.
ಫೋನ್‌ನಲ್ಲಿ ಡೆಸ್ಕ್‌ಟಾಪ್-ಗಾತ್ರದ ಚಿತ್ರಗಳು, ಇದು ಲೋಡ್ ಸಮಯ ಮತ್ತು ಡೇಟಾ ವೆಚ್ಚ ಹೆಚ್ಚಿಸುತ್ತದೆ.
ಸ್ಥಿರ-ಸ್ಥಾನದ ಅಂಶಗಳ ರಾಶಿ: ಅಂಟಿಕೊಂಡ ಹೆಡರ್, ಕುಕಿ ಬ್ಯಾನರ್ ಮತ್ತು ಚಾಟ್ ಬಬಲ್ ಅರ್ಧ ಫೋನ್ ಪರದೆಯನ್ನು ಮುಚ್ಚಬಹುದು.
ಮುಚ್ಚಲಾಗದ ಪಾಪ್-ಅಪ್‌ಗಳು ಚಿಕ್ಕ ಪರದೆಯಲ್ಲಿ, ಮುಚ್ಚುವ ಬಟನ್ ಹೊರಗಿರುವುದರಿಂದ.

ಮೊಬೈಲ್ ಪರಿಶೀಲನಾ ಪಟ್ಟಿ

ವ್ಯೂಪೋರ್ಟ್ meta ಟ್ಯಾಗ್ ಇದೆ; ಜೂಮ್ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿಲ್ಲ
ಯಾವುದೇ ಪುಟದಲ್ಲಿ 320 px ನಲ್ಲಿ ಅಡ್ಡ ಸ್ಕ್ರೋಲ್ ಇಲ್ಲ
ಮುಖ್ಯ ಪಠ್ಯ ~16 px; ಇನ್‌ಪುಟ್‌ಗಳು ಜೂಮ್ ಪ್ರಚೋದಿಸುವುದಿಲ್ಲ
ಟ್ಯಾಪ್ ಗುರಿಗಳು ಆರಾಮವಾಗಿ ದೊಡ್ಡದು ಮತ್ತು ಅಂತರ ಇದೆ
ಮೆನು ಫೋನ್‌ಗಳಲ್ಲಿ ಮತ್ತು ಕೀಬೋರ್ಡ್‌ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ
ಟೇಬಲ್‌ಗಳು ಫೋನ್‌ಗಳಲ್ಲಿ ಓದಬಲ್ಲವು (ಕಾರ್ಡ್‌ಗಳು, ಕಡಿಮೆ ಕಾಲಮ್‌ಗಳು ಅಥವಾ ಸ್ಕ್ರೋಲ್ ಕಂಟೇನರ್)
ಚಿತ್ರಗಳು ಮತ್ತು ಎಂಬೆಡ್‌ಗಳು ಅಳೆಯುತ್ತವೆ; ಸರಿಯಾದ ಗಾತ್ರದ ಫೈಲ್‌ಗಳನ್ನು ನೀಡಲಾಗಿದೆ
ಫಾರ್ಮ್‌ಗಳು ಸರಿಯಾದ ಇನ್‌ಪುಟ್ ಪ್ರಕಾರಗಳನ್ನು ಬಳಸುತ್ತವೆ; ಸಲ್ಲಿಸು ಬಟನ್ ತಲುಪಬಲ್ಲದು
ಯಾವುದೂ ಮುಖ್ಯವಾದದ್ದು ಹೋವರ್ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿಲ್ಲ
ಕನಿಷ್ಠ ಒಂದು ನಿಜವಾದ ಫೋನ್‌ನಲ್ಲಿ ಪರೀಕ್ಷಿಸಲಾಗಿದೆ

ಹೊಂದಾಣಿಕೆಯ ಲೇಔಟ್ ಪ್ರವೇಶಸಾಧ್ಯತೆ ಭಾಗವೂ ಹೌದು: WCAG 320 px ಅಗಲದಲ್ಲಿ ಮತ್ತು 200% ಜೂಮ್‌ನಲ್ಲಿ ವಿಷಯ ಕೆಲಸ ಮಾಡಬೇಕೆಂದು ಕೇಳುತ್ತದೆ. ಜನರು ಪ್ರತಿದಿನ ಫೋನ್‌ಗಳಲ್ಲಿ ಬಳಸುವ ಆ್ಯಪ್ ನಿರ್ಮಿಸುತ್ತಿದ್ದರೆ, ಮೊಬೈಲ್-ಸ್ನೇಹಿ ವೆಬ್ ಆ್ಯಪ್ ನಿರ್ಮಿಸುವುದು ಹೇಗೆ ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಬಹುದಾದ PWA ಗಳನ್ನು ಒಳಗೊಂಡು ಮುಂದೆ ಹೋಗುತ್ತದೆ.

Mythex ನಲ್ಲಿ ಹೊಂದಾಣಿಕೆಯ ವಿನ್ಯಾಸ

Mythex ಹೊಂದಾಣಿಕೆಯ ವೆಬ್ ಆ್ಯಪ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ, ಮತ್ತು Pro ನಲ್ಲಿ ಅವುಗಳನ್ನು Android ಮತ್ತು iPhone ಆ್ಯಪ್‌ಗಳಾಗಿ ಸುತ್ತಬಹುದು. ಕಾರ್ಯಸ್ಥಳದಲ್ಲಿ, ಪೂರ್ವವೀಕ್ಷಣೆಯ ಮೇಲಿನ ಫೋನ್ ಐಕಾನ್ (Switch to Mobile) ಕ್ಲಿಕ್ ಮಾಡಿ ನಿಮ್ಮ ಆ್ಯಪ್ ಅನ್ನು ಫೋನ್-ಗಾತ್ರದ ಫ್ರೇಮ್‌ನಲ್ಲಿ ನೋಡಿ, ಮತ್ತು ಇತರ ಅಗಲಗಳನ್ನು ಪ್ರಯತ್ನಿಸಲು ಫ್ರೇಮ್‌ನ ಅಂಚನ್ನು ಎಳೆಯಿರಿ (ಪೂರ್ವವೀಕ್ಷಣೆ ಮತ್ತು ಕೋಡ್). ಸಣ್ಣ-ಪರದೆ ಲೇಔಟ್ ಸರಿಪಡಿಸಲು ಸಣ್ಣ ಆರಂಭಿಕ ಪ್ರಾಂಪ್ಟ್ ಮೊಬೈಲ್-ಹೊಂದಾಣಿಕೆ ಪ್ರಾಂಪ್ಟ್‌ಗಳು ದಸ್ತಾವೇಜಿನಲ್ಲಿದೆ. ನಿಜವಾದ ಫೋನ್‌ನಲ್ಲಿಯೂ ಪರಿಶೀಲಿಸಿ — ಪ್ರಕಟಿತ URL ತೆರೆಯಿರಿ, ಅಥವಾ ಪೂರ್ವವೀಕ್ಷಣೆ ಲಿಂಕ್ ಹಂಚಿ ನಿಮ್ಮ ಫೋನ್‌ನಲ್ಲಿ ತೆರೆಯಿರಿ.

ಪ್ರಶ್ನೆಗಳು

ಮೊಬೈಲ್ ಹೊಂದಾಣಿಕೆ ಎಂದರೆ ಏನು?

ಹೊಂದಾಣಿಕೆಯ ವೆಬ್‌ಸೈಟ್ ತಾನು ಇರುವ ಪರದೆಗೆ ತಕ್ಕಂತೆ ತನ್ನ ಲೇಔಟ್ ಬದಲಿಸುತ್ತದೆ. ಅದೇ ಪುಟ ಮತ್ತು URL ಫೋನ್, ಟ್ಯಾಬ್ಲೆಟ್ ಅಥವಾ ಡೆಸ್ಕ್‌ಟಾಪ್‌ಗೆ ಮರುಹೊಂದುತ್ತದೆ — ಕಾಲಮ್‌ಗಳು ಒಂದರ ಕೆಳಗೆ ಒಂದು ಬರುತ್ತವೆ, ಚಿತ್ರಗಳು ಕುಗ್ಗುತ್ತವೆ, ಮೆನುಗಳು ಮಡಚಿಕೊಳ್ಳುತ್ತವೆ — ಕುಗ್ಗಿದ ಡೆಸ್ಕ್‌ಟಾಪ್ ಪುಟ ಅಥವಾ ಪ್ರತ್ಯೇಕ ಮೊಬೈಲ್ ಸೈಟ್ ತೋರಿಸುವ ಬದಲು.

ನನ್ನ ಸೈಟ್ ಫೋನ್‌ನಲ್ಲಿ ಏಕೆ ದೂರದಿಂದ ಕಾಣುತ್ತದೆ?

ಬಹುತೇಕ ಯಾವಾಗಲೂ ವ್ಯೂಪೋರ್ಟ್ meta ಟ್ಯಾಗ್ ಇಲ್ಲದಿರುವುದು. ಅದಿಲ್ಲದಿದ್ದರೆ, ಮೊಬೈಲ್ ಬ್ರೌಸರ್‌ಗಳು ಪುಟವನ್ನು ಡೆಸ್ಕ್‌ಟಾಪ್ ಅಗಲದಲ್ಲಿ ರೆಂಡರ್ ಮಾಡಿ ನಂತರ ಕುಗ್ಗಿಸುತ್ತವೆ. width=device-width ಮತ್ತು initial-scale=1 ಇರುವ ವ್ಯೂಪೋರ್ಟ್ ಟ್ಯಾಗ್ ಸೇರಿಸಿ.

ಯಾವ ಪರದೆ ಗಾತ್ರಗಳಿಗೆ ವಿನ್ಯಾಸ ಮಾಡಬೇಕು?

ಸಾಧನಗಳಿಗಲ್ಲ, ವಿಷಯಕ್ಕೆ ವಿನ್ಯಾಸ ಮಾಡಿ: ಸುಮಾರು 320 ರಿಂದ 375 ಪಿಕ್ಸೆಲ್ ಅಗಲದಿಂದ ಆರಂಭಿಸಿ ಮತ್ತು ಲೇಔಟ್ ತಪ್ಪಾಗಿ ಕಾಣುವಲ್ಲಿ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ಸೇರಿಸಿ. Tailwind CSS ನಂತಹ ಸಾಮಾನ್ಯ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳ ಡೀಫಾಲ್ಟ್ ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳು ಸುಮಾರು 640, 768, 1024 ಮತ್ತು 1280 ಪಿಕ್ಸೆಲ್.

ಮೊಬೈಲ್ ಹೊಂದಾಣಿಕೆ Google ಶ್ರೇಯಾಂಕದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆಯೇ?

Google ಸೂಚ್ಯಂಕಕ್ಕಾಗಿ ಪುಟದ ಮೊಬೈಲ್ ಆವೃತ್ತಿಯನ್ನು ಬಳಸುತ್ತದೆ, ಆದ್ದರಿಂದ ಮೊಬೈಲ್‌ನಲ್ಲಿ ಕಾಣೆಯಾದ ವಿಷಯ ಅಥವಾ ಲಿಂಕ್‌ಗಳು Google ನ ದೃಷ್ಟಿಯಿಂದಲೂ ಕಾಣೆಯಾಗಬಹುದು. ಬಳಸಬಹುದಾದ ಮೊಬೈಲ್ ಲೇಔಟ್ Core Web Vitals ಮತ್ತು ಭೇಟಿಗಾರರಿಗೂ ಮುಖ್ಯ.