Kā padarīt tīmekļa vietni mobilajām ierīcēm piemērotu

Lai padarītu tīmekļa vietni mobilajām ierīcēm piemērotu, pievienojiet viewport meta tagu, veidojiet izkārtojumu mobilajam pirmās ar elastīgiem platumiem un izmantojiet CSS lūzuma punktus, lai to pārkārtotu lielākos ekrānos — kolonnas sakraujot, izvēlni sakļaujot un attēlus mērogojot. Pēc tam pārbaudiet katru lapu mobilā platumā, meklējot horizontālu ritināšanu, sīku tekstu un pārāk mazas pogas. AI veidotā vietnē viena skaidra uzvedne un pārbaude mobilā izmēra priekšskatījumā parasti novērš lielāko daļu problēmu.

Kas patiesībā ir responsīvs dizains

Responsīvā vietnē ir viens lapu un URL kopums, kas pielāgojas ekrānam. Nevis atsevišķa „m.“ vietne, CSS maina izkārtojumu noteiktos platumos, ko sauc par lūzuma punktiem. Būvbloki:

• Viewport meta tags liek mobilajām pārlūkprogrammām izmantot ierīces reālo platumu.
• Elastīgi izkārtojumi izmanto procentus, flexbox un grid, nevis fiksētus pikseļu platumus.
• Media vaicājumi (vai ietvaru klases, piemēram, Tailwind md:) maina izkārtojumu virs noteikta platuma.
• Elastīgs medijs — attēli un video, kas sarūk, lai ietilptu savā konteinerā.

Tas ir svarīgi, jo liela daļa jūsu trafika, iespējams, nāk no tālruņiem un jo Google indeksē lapu mobilo versiju. Ja saturs vai saites pastāv tikai darbvirsmā, Google var tās arī nepamanīt.

Iespējas un kompromisi

Mobilajam pirmās parasti ir vienkāršāk: viena kolonna ir visvienkāršākais izkārtojums, un kolonnu pievienošana, kad vieta palielinās, ir mazāk darba nekā to noņemšana.

Daļas, kas parasti salūst

Viewport tags

Ja lapa tālrunī izskatās kā sīka darbvirsmas vietne, viewport tags trūkst:

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

Nepievienojiet maximum-scale=1 vai user-scalable=no. Pieskārienu tuvināšanas bloķēšana apgrūtina vietnes lietošanu cilvēkiem ar vāju redzi.

Fiksēti platumi un horizontāla ritināšana

Visbiežākā responsīvā kļūda ir kaut kas platāks par ekrānu: fiksēts width: 1200px konteiners, plata tabula, garš URL vai koda bloks, attēls bez max-width: 100%. Tad visa lapa ritinās sānis. Izmantojiet max-width width vietā, ļaujiet tekstam pārnesties un dodiet platiem elementiem savu ritināšanas zonu.

Navigācija

Pieci darbvirsmas izvēlnes saites reti ietilpst tālrunī. Parasta atbilde ir izvēlnes poga, kas atver paneli. Atstājiet redzamas divas vai trīs svarīgākās darbības — „Rezervēt“, „Grozs“, „Pieteikties“ — un pārliecinieties, ka izvēlne darbojas ar tastatūru un viegli aizveras.

Teksts un pieskaršanās zonas

• Pamatteksts ap 16 px tālruņos ir saprātīgs minimums. Ievades lauki ar mazāku tekstu liek iPhone tālummaiņu, kad tiek pieskarts.
• Pārliecinieties, ka pogas un saites ir viegli trāpāmas. WCAG 2.2 AA paredz minimumu 24 x 24 CSS pikseļus (vai pietiekamu atstarpi); ap 44 pikseļiem ir ērtāk īkšķiem.
• Atstājiet atstarpi starp blakus esošām saitēm, lai cilvēki netrāpītu nepareizajā.

Tabulas un dati

Platas tabulas ir grūtākā responsīvas lietotnes daļa. Varianti, dotajā secībā: rādīt mazāk kolonnu tālruņos, pārvērst katru rindu kartītē vai ievietot tabulu horizontāli ritināmā konteinerā ar piespraustu pirmo kolonnu. Izvēlieties atkarībā no tā, ko cilvēkiem jāsalīdzina.

Attēli un mediji

Izmantojiet max-width: 100% un height: auto, rādiet mazākus failus mazākiem ekrāniem ar srcset un iestatiet platumu un augstumu, lai izvairītos no izkārtojuma lēcieniem. Iegultiem video un kartēm vajag responsīvu ietvaru, lai tie saglabātu proporcijas. Mazāki attēli arī padara lapas ātrākas — skatiet kā padarīt vietni ātrāku.

Formas

Novietojiet etiķetes virs laukiem, padariet laukus pilnā platumā un izmantojiet pareizos ievades tipus (type="email", type="tel", inputmode="numeric"), lai tālruņi rādītu atbilstošu tastatūru. Novietojiet iesniegšanas pogu tur, kur to sasniedz īkšķis, un paturiet to redzamu, kad atveras tastatūra.

Mijiedarbība tikai ar peles pārvietošanu

Tālruņiem nav peles. Rīkpadomi, nolaižamās izvēlnes un priekšskatījumi, kas parādās tikai pārvietojot peli, ir neredzami lietotājiem ar skārienekrānu. Padariet tos darbīgus arī ar pieskārienu.

Uzvednes, kas strādā

Jaunam projektam pasakiet to uzreiz:

Veidojiet to mobilajam pirmās. Viena kolonna tālruņos, divas kolonnas no planšetdatora platuma, pilns izkārtojums darbvirsmā. Bez horizontālas ritināšanas 320 px platumā, pamatteksts vismaz 16 px, pieskaršanās zonas vismaz 44 px, izvēlnes poga mazos ekrānos un tabulas, kas tālruņos pārvēršas kartītēs.

Esošai lapai aprakstiet to, ko redzat:

Tālruņos lapa /pricing ritinās sānis, un trīs plānu kartītes ir saspiestas līdzās. Zem 768 px sakārtojiet kartītes vertikāli, padariet salīdzināšanas tabulu horizontāli ritināmu savā konteinerā ar piespraustu funkciju kolonnu un atstājiet darbvirsmas izkārtojumu nemainītu.

Pārbaudiet katru lapu 375 px platumā. Uzskaitiet visu, kas pārklājas, pārklāj vai ir mazāks par 16 px tekstu vai 44 px pieskaršanās zonām, vai darbojas tikai ar peles pārvietošanu, un pēc tam labojiet katru.

Soli pa solim

1. Pārbaudiet viewport tagu lapas galvenē.
2. Pārbaudiet 320–375 px platumā pārlūka ierīces režīmā vai tālruņa izmēra priekšskatījumā. Ritiniet katru lapu no augšas līdz apakšai.
3. Vispirms novērsiet horizontālo ritināšanu. Atrodiet elementu, kas ir pārāk plats; viss pārējais ir grūti novērtējams, kamēr tas nav novērsts.
4. Sakārtojiet navigāciju: izvēlnes poga, galvenās darbības redzamas.
5. Pārbaudiet tekstu, pieskaršanās zonas un formas katrā galvenajā plūsmā — reģistrācija, meklēšana, norēķini, kontakts.
6. Apstrādājiet tabulas un medijus: kartītes vai ritināmi konteineri, responsīvi attēli un iegulumi.
7. Pārbaudiet starpizmērus. Lēni velciet platumu no tālruņa līdz darbvirsmai; izkārtojumi bieži salūst ap planšetdatora platumu.
8. Pārbaudiet uz reāla tālruņa. Emulatori neparāda tādas lietas kā ekrāna tastatūru, kas aizsedz pogu, izgriezumus un to, cik ātri vietne darbojas mobilajos datos.

Biežākās kļūdas

• Pārbaude tikai vienā tālruņa izmērā. Pārbaudiet mazu tālruni, lielu tālruni un planšetdatoru.
• Satura slēpšana mobilajā, lai tas ietilptu. Google indeksē mobilo versiju, un tālruņu lietotāji vēlas to pašu informāciju.
• Tālummaiņas atslēgšana viewport tagā.
• Darbvirsmas izmēra attēli tālruņos, kas maksā ielādes laiku un datus.
• Fiksēti elementi, kas sakrājas: līmīga galvene, sīkdatņu baneris un tērzēšanas burbulis var aizsegt pusi tālruņa ekrāna.
• Uznirstošie logi, ko nevar aizvērt mazā ekrānā, jo aizvēršanas poga ir ārpus ekrāna.

Mobilās piemērotības kontrolsaraksts

• Viewport meta tags ir; tālummaiņa nav atslēgta
• Nav horizontālas ritināšanas 320 px platumā nevienā lapā
• Pamatteksts ~16 px; ievades lauki neizraisa tālummaiņu
• Pieskaršanās zonas ir ērti lielas un atstarpotas
• Izvēlne darbojas tālruņos un ar tastatūru
• Tabulas ir lasāmas tālruņos (kartītes, mazāk kolonnu vai ritināms konteiners)
• Attēli un iegulumi mērogojas; tiek rādīti pareizā izmēra faili
• Formas izmanto pareizos ievades tipus; iesniegšanas poga ir sasniedzama
• Nekas svarīgs nav atkarīgs no peles pārvietošanas
• Pārbaudīts vismaz uz viena reāla tālruņa

Responsīvs izkārtojums ir arī daļa no pieejamības: WCAG prasa, lai saturs darbotos 320 px platumā un 200% tālummaiņā. Ja veidojat lietotni, ko cilvēki ikdienā izmantos tālruņos, kā izveidot mobilajai ierīcei piemērotu tīmekļa lietotni iet tālāk, tostarp par instalējamām PWA.

Responsīvs dizains Mythex

Mythex veido responsīvas tīmekļa lietotnes, un Pro plānā tās var iesaiņot kā Android un iPhone lietotnes. Darba vietā noklikšķiniet uz tālruņa ikonas virs Preview (Switch to Mobile), lai redzētu lietotni tālruņa izmēra rāmī, un velciet rāmja malu, lai izmēģinātu citus platumus (Preview and Code). Dokumentācijā ir īsa sākuma uzvedne mazā ekrāna izkārtojuma labošanai — mobilās piemērotības uzvednes. Pārbaudiet arī uz reāla tālruņa — atveriet publicēto URL vai kopīgojiet priekšskatījuma saiti un atveriet to tālrunī.

Jautājumi