Како да направите веб-страница прилагодлива за мобилни уреди

За да направите веб-страница прилагодлива за мобилни уреди, додајте meta viewport ознака, изградете го распоредот од мобилен прв со флексибилни ширини и користете CSS прекини за да го преуредите на поголеми екрани — редење на колони, собирање на менито и размер на сликите за да се вклопат. Потоа проверете ја секоја страница со ширина на телефон за странично лизгање, премал текст и копчиња премали за допир. На веб-страница изградена со AI, еден јасен упат плус преглед во големина на телефон обично поправа најголем дел од проблемите.

Што всушност е прилагодливиот дизајн

Прилагодливата страница користи едно множество страници и URL адреси што се прилагодуваат на екранот. Наместо посебна „m.“ страница, CSS го менува распоредот на одредени ширини, наречени прекини (breakpoints). Градежните блокови:

• Meta viewport ознаката им кажува на мобилните прелистувачи да ја користат вистинската ширина на уредот.
• Течни распореди користат проценти, flexbox и grid наместо фиксни пиксели.
• Media queries (или класи на рамка, како md: во Tailwind) го менуваат распоредот над дадена ширина.
• Флексибилни медиуми — слики и видеа што се свиткуваат за да се вклопат во својот контејнер.

Ва е важно затоа што голем дел од вашиот сообраќај веројатно е од телефони, а Google ги индексира мобилните верзии на страниците. Ако содржината или врските постојат само на десктоп, Google можеби и нив нема да ги види.

Опции и компромиси

Пристапот од мобилен прв обично е поедноставен: една колона е најлесниот распоред, а додавањето колони како што се шири просторот е помалку работа од нивното отстранување.

Деловите што обично се расипуваат

Viewport ознаката

Ако страницата на телефон изгледа како мала десктоп страница, viewport ознаката недостасува:

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

Не додавајте maximum-scale=1 или user-scalable=no. Блокирањето на зумирање со штипнување ја прави страницата потешка за луѓе со слаб вид.

Фиксни ширини и хоризонтално лизгање

Најчеста прилагодлива грешка е нешто пошироко од екранот: контејнер со фиксна width: 1200px, широка табела, долг URL или блок со код, слика без max-width: 100%. Целата страница тогаш се лизга странично. Користете max-width наместо 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, или работи само при лебдење, па поправете го секое.

Чекор по чекор

1. Потврдете дека viewport ознаката е во заглавието на страницата.
2. Тестирајте при ширина од 320–375 px во режимот за уред на прелистувачот или во преглед во големина на телефон. Лизгајте ја секоја страница од врвот до дното.
3. Прво поправете го хоризонталното лизгање. Најдете го елементот што е премногу широк; сите други работи се тешко да се оценат додека не исчезне.
4. Средете ја навигацијата: копче за мени, клучните дејства видливи.
5. Проверете текст, зони за допир и формулари на секој клучен тек — регистрација, пребарување, плаќање, контакт.
6. Справете се со табелите и медиумите: картички или контејнери за лизгање, прилагодливи слики и вградувања.
7. Проверете ги меѓувеличините. Полека повлечете ја ширината од телефон до десктоп; распоредите често се расипуваат околу ширината на таблет.
8. Тестирајте на вистински телефон. Емулаторите ги пропуштаат работи како тастатурата на екранот што покрива копче, засеците и колку брзо се вчитува страницата на мобилен интернет.

Чести грешки

• Тестирање само на една големина телефон. Проверете мал телефон, голем телефон и таблет.
• Криење содржина на мобилен за да се вклопи. Google ја индексира мобилната верзија, а корисниците на телефони сакаат истите информации.
• Оневозможување на зумирањето во viewport ознаката.
• Слики за десктоп на телефони, што чинат време на вчитување и податоци.
• Нагомилани елементи со фиксна позиција: залепен заглавие, банер за колачиња и балонче за чет можат да покријат половина од екранот на телефон.
• Прозорци што не можат да се затворат на мал екран бидејќи копчето за затворање е надвор од видливото.

Листа за мобилна проверка

• Meta viewport ознаката е присутна; зумирањето не е оневозможено
• Нема хоризонтално лизгање при 320 px на ниедна страница
• Основен текст ~16 px; полињата не предизвикуваат зумирање
• Зоните за допир се доволно големи и растојанија
• Менито работи на телефони и со тастатура
• Табелите се читливи на телефони (картички, помалку колони или контејнер за лизгање)
• Сликите и вградувањата се скалираат; служат датотеки со соодветна големина
• Формуларите користат соодветни типови на внес; копчето за испраќање е достапно
• Ништо важно не зависи од лебдење
• Тестирано најмалку на еден вистински телефон

Прилагодливиот распоред е исто така дел од пристапноста: WCAG бара содржината да функционира при ширина од 320 px и при зумирање од 200%. Ако градите апликација што луѓето ќе ја користат секојдневно на телефоните, како да изградите веб-апликација прилагодлива за мобилни оди подалеку, вклучително и инсталирачки PWA.

Прилагодлив дизајн на Mythex

Mythex гради прилагодливи веб-апликации, а на Pro може да ги спакува како Android и iPhone апликации. Во работниот простор, кликнете на иконата за телефон над Preview (Switch to Mobile) за да ја видите апликацијата во рамка со големина на телефон, и повлечете го работ на рамката за да пробате други ширини (Preview and Code). Документацијата има краток стартувачки упат за поправање на распоредот на мал екран во упатите за прилагодливи за мобилни. Проверете и на вистински телефон — отворете ја објавената URL адреса или споделете врска за преглед и отворете ја на телефонот.

Прашања