Веб-сайтты мобильді құрылғыға қалай бейімдеуге болады

Веб-сайтты мобильді құрылғыға бейімдеу үшін viewport meta тегін қосыңыз, макетті икемді ендермен мобильді-бірінші принципте құрастырыңыз және үлкен экрандарда оны қайта реттеу үшін CSS breakpoint-терін пайдаланыңыз — бағандарды бір-бірінің астына қою, мәзірді жию және суреттерді сыйғызып кішірейту. Содан кейін әр бетті телефон енінде тексеріңіз: бүйірге айналу, тым кішкентай мәтін және басуға тым кіші батырмалар бар ма. AI арқылы жасалған сайтта бір нақты сұрау және телефон өлшеміндегі превьюдегі өтпе көбіне мәселенің көбін түзетеді.

Бейімделгіш дизайн нені білдіреді

Бейімделгіш сайт экранға бейімделетін бір жиын бет пен URL пайдаланады. Бөлек «m.» сайт орнына CSS белгілі ендерде макетті өзгертеді; оларды breakpoint деп атайды. Негізгі құрамдас бөліктер:

• Viewport meta тегі мобильді браузерлерге құрылғының нақты енін пайдалануды айтады.
• Икемді макеттер пиксельдік тұрақты ендердің орнына пайыздарды, flexbox және grid қолданады.
• Media query-лер (немесе Tailwind-тің md: сияқты фреймворк класстары) берілген еннен жоғары макетті өзгертеді.
• Икемді медиа — контейнеріне сыйғызып кішірейетін суреттер мен видео.

Бұл маңызды, себебі трафигіңіздің көп бөлігі телефондардан келуі мүмкін, және Google беттердің мобильді нұсқасын индекстейді. Мазмұн немесе сілтемелер тек компьютерде болса, Google оларды көрмеуі мүмкін.

Таңдаулар мен компромисстер

Мобильді-бірінші әдетте қарапайым: бір баған ең оңай макет, ал кеңістік өскен сайын бағандарды қосу оларды алып тастағаннан аз жұмыс.

Жиі бұзылатын бөліктер

Viewport тегі

Бет телефонда кішкене компьютер сайтындай көрінсе, viewport тегі жоқ:

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

maximum-scale=1 немесе user-scalable=no қоспаңыз. Pinch-zoom-ды бөгеу көру қабілеті төмен адамдарға сайтты қиындатады.

Тұрақты ендер және көлденеңінен айналу

Ең жиі кездесетін бейімделгіштік қатесі — экрандан кеңірек нәрсе: тұрақты width: 1200px контейнері, кең кесте, ұзын URL немесе код блогы, max-width: 100% жоқ сурет. Сонда бүкіл бет бүйірге айналады. width орнына max-width қолданыңыз, мәтіннің орағуына рұқсат етіңіз және кең нәрселерге өз айналу аймағын беріңіз.

Навигация

Компьютердегі бес мәзір сілтемесі телефонға сирек сыяды. Әдетте жауап — панель ашатын мәзір батырмасы. Ең маңызды екі-үш әрекетті көрінетін ұстаңыз — «Брондау», «Себет», «Кіру» — және мәзірдің перне арқылы жұмыс істеп, оңай жабылатынын тексеріңіз.

Мәтін және басу аймақтары

• Телефондағы дене мәтіні шамамен 16 px болуы ақылға қонымды ең аз мән. Кіші мәтіні бар енгізу өрістері iPhone-да басқанда зумдауды тудырады.
• Батырмалар мен сілтемелерге оңай тиюге болатындай етіңіз. WCAG 2.2 AA кем дегенде 24 x 24 CSS пиксель (немесе жеткілікті аралық) белгілейді; шамамен 44 пиксель бас бармақ үшін ыңғайлырақ.
• Көрші сілтемелердің арасында бос орын қалдырыңыз, адамдар қатесіз басу үшін.

Кестелер және деректер

Кең кестелер икемді қолданбаның ең қиын бөлігі. Таңдаулар, қалағандық ретімен: телефонда аз баған көрсету, әр жолды картаға айналдыру, немесе кестені бірінші бағаны бекітілген, көлденеңінен айналатын контейнерге салу. Адамдарға не салыстыру керек екеніне қарай таңдаңыз.

Суреттер және медиа

max-width: 100% және height: auto қолданыңыз, кіші экрандарға srcset арқылы кіші файлдар беріңіз және макет секірулерінің алдын алу үшін width пен height орнатыңыз. Енгізілген видео мен карталарға өлшем арақатынасын сақтау үшін бейімделгіш орауыш керек. Кіші суреттер беттерді де жылдамдатады — сайтыңызды қалай жылдамдатуға болады мақаласын қараңыз.

Формалар

Заголовокты өрістердің үстіне қойыңыз, өрістерді толық ені етіңіз және дұрыс енгізу түрлерін (type="email", type="tel", inputmode="numeric") пайдаланыңыз, сонда телефон сәйкес пернетақтаны көрсетеді. Жіберу батырмасын бас бармақ жетерлік жерге қойыңыз және пернетақта ашылғанда көрінетін етіңіз.

Тек ілу (hover) арқылы әрекеттер

Телефондарда hover жоқ. Тек hover арқылы пайда болатын тултиптер, ашылмалы тізімдер және алдын ала қараулар сенсорлы пайдаланушыларға көрінбейді. Оларды басқанда да жұмыс істетіңіз.

Жұмыс істейтін промпттар

Жаңа құрастыруға оны бірден айтыңыз:

Мобильді-бірінші принципте жасаңыз. Телефондарда бір баған, планшет енінен екі баған, компьютерде толық макет. 320 px енінде көлденеңінен айналу жоқ, дене мәтіні кемінде 16 px, басу аймақтары кемінде 44 px, кіші экрандарда мәзір батырмасы және телефондарда картаға айналатын кестелер.

Бар бет үшін не көргеніңізді сипаттаңыз:

Телефондарда /pricing беті бүйірге айналады және үш жоспар карточкасы қатар қысылып қалған. 768 px-тен төмен карточкаларды тігінен қойыңыз, салыстыру кестесін өз контейнерінде көлденеңінен айналатын, мүмкіндік бағанасы бекітілген етіңіз, ал компьютер макетін өзгертпеңіз.

Әр бетті 375 px енінде тексеріңіз. Шығып кеткен, қабаттасқан, 16 px-тен кіші мәтіні немесе 44 px-тен кіші басу аймағы бар, немесе тек hover-мен жұмыс істейтін нәрселердің тізімін жасаңыз, содан соң әрқайсысын түзетіңіз.

Қадам бойынша

1. Viewport тегінің бет басында бар екенін растаңыз.
2. 320–375 px енінде сынаңыз браузердің құрылғы режимінде немесе телефон өлшеміндегі превьюде. Әр бетті жоғарыдан төменге дейін айналдырыңыз.
3. Алдымен көлденеңінен айналуды түзетіңіз. Тым кең элементті табыңыз; ол жойылмайынша басқасын бағалау қиын.
4. Навигацияны реттеңіз: мәзір батырмасы, негізгі әрекеттер көрінеді.
5. Мәтінді, басу аймақтарын және формаларды әр негізгі ағында тексеріңіз — тіркелу, іздеу, төлем, байланыс.
6. Кестелер мен медиаға қараңыз: карталар немесе айналу контейнерлері, бейімделгіш суреттер мен ендірулер.
7. Аралық өлшемдерді тексеріңіз. Енді телефоннан компьютерге дейін баяу созыңыз; макеттер жиі планшет енінде бұзылады.
8. Нақты телефонда сынаңыз. Эмуляторлар экрандағы пернетақтаның батырманы жауып қоюын, шеттерді (notch) және мобильді деректерде сайттың қаншалықты жылдам жүретінін байқамайды.

Жиі кездесетін қателер

• Тек бір телефон өлшемінде тексеру. Кішкентай телефонды, үлкен телефонды және планшетті тексеріңіз.
• Мобильдіде мазмұнды жасыру, оны сыйғызу үшін. Google мобильді нұсқаны индекстейді, ал телефон пайдаланушылары дәл сол ақпаратты қалайды.
• Viewport тегінде зумды өшіру.
• Телефондарға компьютер өлшеміндегі суреттер, бұл жүктелу уақыты мен трафикке шығын.
• Бекітілген элементтердің жиналуы: жабысқақ тақырып, cookie баннері және чат көпіршігі телефон экранының жартысын жабуы мүмкін.
• Жабылмайтын қалқымалы терезелер кіші экранда, себебі жабу батырмасы экраннан тыс.

Мобильді тексеру тізімі

• Viewport meta тегі бар; зум өшірілмеген
• Кез келген бетте 320 px-те көлденеңінен айналу жоқ
• Дене мәтіні ~16 px; енгізу өрістері зумды іске қоспайды
• Басу аймақтары жеткілікті үлкен және арасы бос
• Мәзір телефондарда және перне арқылы жұмыс істейді
• Кестелер телефонда оқылады (карталар, аз бағандар немесе айналу контейнері)
• Суреттер мен ендірулер масштабталады; дұрыс өлшемдегі файлдар беріледі
• Формалар дұрыс енгізу түрлерін пайдаланады; жіберу батырмасы қолжетімді
• Маңызды ешнәрсе тек hover-ге байланысты емес
• Кем дегенде бір нақты телефонда сыналған

Бейімделгіш макет — қолжетімділіктің бір бөлігі да: WCAG мазмұнның 320 px енінде және 200% зумда жұмыс істеуін талап етеді. Адамдар телефонында күнделікті пайдаланатын қолданба жасасаңыз, мобильді-дос веб-қолданбаны қалай жасау керек орнатылатын PWA-ларды қоса, одан да толық түсіндіреді.

Mythex-те бейімделгіш дизайн

Mythex бейімделгіш веб-қолданбаларды құрастырады, ал Pro-да оларды Android және iPhone қолданбалары ретінде орай алады. Жұмыс кеңістігінде Preview-дың үстіндегі телефон белгішесін (Switch to Mobile) басып, қолданбаңызды телефон өлшеміндегі шеңберде көріңіз, және шеңбердің шетін сүйреп басқа ендерді байқаңыз (Preview and Code). Құжаттарда кіші экран макетін түзету үшін мобильді бейімделгіш промпттар ішінде қысқа бастапқы сұрау бар. Нақты телефонда да тексеріңіз — жарияланған URL-ды ашыңыз, немесе превью сілтемесін бөлісіп, телефоныңызда ашыңыз.

Сұрақтар