Вебсайтаа утсанд тохирсон (responsive) болгох нь

Вебсайтаа утсанд тохирсон болгохын тулд viewport meta tag нэм, загварыг mobile-first байдлаар уян өргөнтэй бүтээ, том дэлгэцэн дээр CSS breakpoint ашиглан байрлалыг нь өөрчил — багана дээш доош хөдөлгөх, цэсийг нугалах, зургийг тохируулж жижиглэх. Дараа нь бүх хуудсыг утасны өргөнд хэвтээ гүйлгэлт, маш жижиг текст, товших боломжгүй жижиг товчлуурын талаар шалга. AI-ээр бүтээсэн сайт дээр нэг тодорхой prompt болон утасны хэмжээний preview дээрх нэг удаагийн шалгалт ихэнх асуудлыг засдаг.

Responsive загвар жинхэнэдээ юу вэ

Responsive сайт нь дэлгэцэнд тохируулан өөрчлөгдөх хуудас болон URL-ын нэг багцыг ашигладаг. Тусдаа «m.» сайт байхын оронд CSS нь тодорхой өргөнд байрлалыг өөрчилдөг бөгөөд үүнийг breakpoint гэдэг. Үндсэн бүрэлдэхүүн хэсгүүд:

• Viewport meta tag нь мобайл хөтөчид төхөөрөмжийн жинхэнэ өргөнийг ашиглахыг хэлдэг.
• Уян байрлалууд нь тогтмол пикселийн өргөнийн оронд хувь, flexbox, grid ашигладаг.
• Media query (эсвэл Tailwind-ийн md: гэх мэт фреймворкийн классууд) тодорхой өргөнөөс дээш байрлалыг өөрчилдөг.
• Уян медиа — контейнерт багтахаар жижиглэгддэг зураг, видео.

Энэ чухал, учир нь таны зочдын ихэнх нь утсан дээр байж магадгүй, мөн Google хуудасны мобайл хувилбарыг индексжүүлдэг. Агуулга эсвэл холбоос зөвхөн компьютер дээр байвал Google тэдгээрийг бас харахгүй байж магадгүй.

Сонголт ба ашиг, алдагдал

Mobile-first ихэвчлэн хамгийн энгийн: нэг багана хамгийн хялбар байрлал, мөн орон зай нэмэгдэхийн хэрээр багана нэмэх нь багана хасахаас цөөн ажил.

Ихэвчлэн эвдрэх хэсгүүд

Viewport tag

Хэрэв хуудас утсан дээр жижиг компьютерийн сайт шиг харагдвал viewport tag дутуу байна:

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

maximum-scale=1 эсвэл user-scalable=no бүү нэм. Pinch-zoom-ийг хаах нь хараа муутай хүмүүст сайтыг ашиглахад хэцүү болгодог.

Тогтмол өргөн ба хэвтээ гүйлгэлт

Хамгийн түгээмэл responsive алдаа бол дэлгэцээсээ өргөн зүйл: тогтмол width: 1200px контейнер, өргөн хүснэгт, урт URL эсвэл кодын блок, max-width: 100%-гүй зураг. Тэгвэл бүх хуудас хажуу тийш гүйлгэгдэнэ. width-ийн оронд max-width ашигла, текстийг нь бутлуулж, өргөн зүйлд өөрийн гүйлгэх талбай өг.

Навигаци

Компьютерийн таван цэсний холбоос утсан дээр ихэвчлэн багтдаггүй. Ихэвчлэн энэ нь самбар нээдэг цэсний товч. Хамгийн чухал хоёр, гурван үйлдлийг — «Захиалах», «Сагс», «Нэвтрэх» — харагдуулж байлгаж, цэс гар дээр ажиллаж, амархан хаагддаг эсэхийг шалга.

Текст ба товших талбай

• Утсан дээрх үндсэн текст ойролцоогоор 16 px байх нь ухаалаг доод хэмжээ. Жижиг текст бүхий оруулах талбарууд iPhone-д товшихад zoom хийлгэдэг.
• Товчлуур болон холбоосыг хөнгөн товшигдохоор хий. WCAG 2.2 AA нь доод хэмжээ 24×24 CSS пикселийг (эсвэл хангалттай зай) заадаг; ойролцоогоор 44 пиксель нь хуруунд илүү тохиромжтой.
• Ойр байгаа холбоосуудын хооронд зай үлдээ, ингэснээр хүмүүс буруу холбоос дарахгүй.

Хүснэгт ба өгөгдөл

Өргөн хүснэгт бол responsive аппын хамгийн хэцүү хэсэг. Сонголтууд, дээд эрэмбийн дарааллаар: утсан дээр цөөн багана харуулах, мөр бүрийг карт болгох, эсвэл хүснэгтийг эхний баганаа бэхэлсэн хэвтээ гүйлгэх контейнерт байрлуулах. Хүмүүст юуг харьцуулах хэрэгтэйг харгалзан сонго.

Зураг ба медиа

max-width: 100% ба height: auto ашигла, жижиг дэлгэцэнд srcset-ээр жижиг файл үзүүл, байрлалын үсрэлтээс сэргийлэхийн тулд width, height тохируул. Суулгасан видео болон газрын зургийг харьцаагаа хадгалах responsive ороолтонд байрлуул. Жижиг зураг хуудсыг бас хурдан болгодог — вебсайтаа хурдан болгох нь-г үз.

Маягт

Нэрийн шошгыг талбарын дээр, талбаруудыг бүтэн өргөнөөр байрлуул, зөв оролтын төрөл (type="email", type="tel", inputmode="numeric") ашигла, ингэснээр утас тохирох гарыг харуулна. Илгээх товчийг хуруунд хүрэх газарт байрлуул, гар нээгдэхэд харагдсаар байлга.

Зөвхөн hover дээр ажилладаг зүйлс

Утас hover хийдэггүй. Зөвхөн hover дээр гарч ирэх tooltip, dropdown, урьдчилан харах зүйлс товшдог хэрэглэгчдэд харагддаггүй. Тэдгээрийг товшиж ч ажилладаг болго.

Ажилладаг prompt-ууд

Шинэ бүтээлийн хувьд эхнээс нь хэл:

Үүнийг mobile-first байдлаар бүтээ. Утсан дээр нэг багана, таблетаас хоёр багана, компьютер дээр бүрэн байрлал. 320 px өргөнд хэвтээ гүйлгэлт байхгүй, үндсэн текст дор хаяж 16 px, товших талбар дор хаяж 44 px, жижиг дэлгэцэн дээр цэсний товч, утсан дээр хүснэгтүүд картад хувирна.

Одоо байгаа хуудсын хувьд харсаноо тайлбарла:

Утсан дээр /pricing хуудас хажуу тийш гүйлгэгдэж, гурван төлөвлөгөөний карт зэрэгцэж шахагдсан байна. 768 px-ээс доош картуудыг босоо байдлаар дараалуул, харьцуулах хүснэгтийг өөрийн контейнерт хэвтээ гүйлгэдэг болгож, онцлогийн баганыг бэхэл, компьютерийн загварыг хэвээр нь үлдээ.

Бүх хуудсыг 375 px өргөнд шалга. Хэтэрсэн, давхцсан, 16 px-ээс жижиг текст эсвэл 44 px-ээс жижиг товших талбар, эсвэл зөвхөн hover дээр ажилладаг зүйлсийг жагсаа, дараа нь бүгдийг нь засаарай.

Алхам алхмаар

1. Viewport tag хуудасны head-д байгааг баталгаажуул.
2. 320–375 px өргөнд туршаарай хөтчийн төхөөрөмжийн горим эсвэл утасны хэмжээний preview дээр. Хуудас бүрийг дээрээс доош гүйлгэ.
3. Эхлээд хэвтээ гүйлгэлтийг засаарай. Хэт өргөн элементийг ол; түүнийг арилгахаас өмнө бусад зүйлийг үнэлэхэд хэцүү.
4. Навигацийг эмх цэгцтэй болго: цэсний товч, гол үйлдлүүд харагдах.
5. Текст, товших талбар, маягтыг гол урсгал бүр дээр шалга — бүртгүүлэх, хайх, захиалах, холбоо барих.
6. Хүснэгт ба медиаг зохицуул: карт эсвэл гүйлгэх контейнер, responsive зураг ба суулгалт.
7. Хоорондын хэмжээнүүдийг шалга. Өргөнийг утаснаас компьютер рүү аажмаар чирээд үз; байрлал ихэвчлэн таблетын өргөнд эвддэг.
8. Жинхэнэ утсан дээр туршаарай. Эмуляторууд дэлгэцийн гар товчлуурыг хамгаалах, notch, мобайл интернэт дээр сайт хэр хурдан ажилладагийг алддаг.

Түгээмэл алдаанууд

• Нэг утасны хэмжээнд л туршиж байх. Жижиг утас, том утас, таблет гурвыг шалга.
• Агуулгыг тохируулахын тулд мобайл дээр нуух. Google мобайл хувилбарыг индексжүүлдэг, утасны хэрэглэгчид ижил мэдээллийг хүсдэг.
• Viewport tag дээр zoom-ийг идэвхгүй болгох.
• Компьютерийн хэмжээний зураг утсан дээр, энэ нь ачаалалтын хугацаа болон өгөгдөл зардаг.
• Тогтмол байрлалтай элементүүд хуримтлагдах: наалдсан header, cookie баннер, чатын бөмбөлөг нь утасны дэлгэцийн хагасыг далдлаж магадгүй.
• Хаах боломжгүй pop-up жижиг дэлгэцэн дээр, хаах товч нь дэлгэцээс гадуур байвал.

Утасны шалгах жагсаалт

• Viewport meta tag байгаа; zoom хаагдаагүй
• Ямар ч хуудсанд 320 px-д хэвтээ гүйлгэлт байхгүй
• Үндсэн текст ~16 px; оруулах талбар zoom хийлгэхгүй
• Товших талбар хангалттай том, зайтай
• Цэс утсан дээр, гараар ажилладаг
• Хүснэгт утсан дээр уншигдахуйц (карт, цөөн багана эсвэл гүйлгэх контейнер)
• Зураг, суулгалт хэмжээгээ тохируулдаг; зөв хэмжээтэй файл үзүүлдэг
• Маягтууд зөв оролтын төрөл ашигладаг; илгээх товч хүрэх боломжтой
• Чухал зүйл hover-оос хамаардаггүй
• Дор хаяж нэг жинхэнэ утсан дээр туршсан

Responsive байрлал нь мөн хандалтын боломж-ийн нэг хэсэг: WCAG нь агуулга 320 px өргөнд болон 200% zoom дээр ажиллахыг шаарддаг. Хэрэв хүмүүс өдөр бүр утсан дээрээ ашиглах апп бүтээж байгаа бол утсанд тохирсон веб апп хэрхэн бүтээх вэ нь суулгагдах PWA-г оруулаад илүү дэлгэрэнгүй.

Mythex дээрх responsive загвар

Mythex responsive веб апп бүтээдэг, Pro дээр тэдгээрийг Android болон iPhone апп болгон ороож чадна. Workspace-д Preview-ийн дээрх утасны дүрсийг дарж (Switch to Mobile) аппаа утасны хэмжээний хүрээнд харж, хүрээний ирмэгийг чирж өөр өргөнийг туршиж үзэж болно (Preview болон Code). Docs-д бага дэлгэцийн байрлалыг засах товч starter prompt байгаа — mobile-responsive prompt-ууд-г үз. Жинхэнэ утсан дээр мөн шалга — нийтлэгдсэн URL-ээ нээ, эсвэл preview холбоосыг хуваалцаад утсан дээрээ нээ.

Асуултууд