Kako narediti spletno stran prilagodljivo za mobilne naprave

Za prilagoditev spletne strani za mobilne naprave dodajte oznako meta viewport, postavitev zgradite najprej za mobilne naprave s prilagodljivimi širinami in z mejami CSS (breakpoints) jo prerazporedite na večjih zaslonih – zlaganje stolpcev, zlaganje menija in prilagajanje slik. Nato vsako stran preverite pri širini telefona: ali se vodoravno pomika, ali je besedilo premajhno in ali so gumbi pretežko zadeti s prstom. Na spletnem mestu, zgrajenem z AI, en jasen poziv in pregled v predogledu v velikosti telefona ponavadi odpravi večino težav.

Kaj je dejansko odzivno oblikovanje

Odzivna stran uporablja en nabor strani in naslovov, ki se prilagodijo zaslonu. Namesto ločenega mesta „m.“ CSS na določenih širinah spremeni postavitev; tem točkam pravimo breakpoints (prelomne točke). Gradniki so:

• Oznaka meta viewport pove mobilnim brskalnikom, naj uporabijo resnično širino naprave.
• Tekoče postavitve uporabljajo odstotke, flexbox in grid namesto fiksnih širin v slikovnih pikah.
• Medijske poizvedbe (ali razredi ogrodij, kot je Tailwindov md:) spremenijo postavitev nad določeno širino.
• Prilagodljivi mediji – slike in videi, ki se skrčijo, da se prilegajo vsebniku.

To je pomembno, ker je verjetno velik del vašega prometa na telefonih in ker Google indeksira mobilno različico vaših strani. Če so vsebina ali povezave samo na namizju, jih morda Google prav tako ne vidi.

Možnosti in kompromisi

Mobile-first je ponavadi preprostejši: en stolpec je najlažja postavitev, dodajanje stolpcev, ko prostora postane več, pa je manj dela kot njihovo odstranjevanje.

Deli, ki se ponavadi pokvarijo

Oznaka viewport

Če stran na telefonu izgleda kot pomanjšano namizno mesto, manjka oznaka viewport:

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

Ne dodajajte maximum-scale=1 ali user-scalable=no. Blokiranje povečave s prstoma otežuje uporabo ljudem s slabovidnostjo.

Fiksne širine in vodoravno pomikanje

Najpogostejša napaka pri odzivnosti je nekaj, kar je širše od zaslona: fiksni vsebnik width: 1200px, široka tabela, dolg URL ali blok kode, slika brez max-width: 100%. Celotna stran se nato pomika vstran. Uporabite max-width namesto width, pustite besedilu, naj se prelomi, in široke stvari dajte v lastno območje za pomikanje.

Navigacija

Pet povezav v namiznem meniju se na telefonu redko prilega. Običajen odgovor je gumb za meni, ki odpre ploščo. Ohranite vidna dva ali tri najpomembnejša dejanja – „Rezerviraj“, „Košarica“, „Prijava“ – in poskrbite, da meni deluje s tipkovnico in se zlahka zapre.

Besedilo in tarče za dotik

• Osnovno besedilo okoli 16 slikovnih pik je smiselna najmanjša vrednost na telefonih. Vnosna polja z manjšim besedilom povzročijo, da se iPhone ob dotiku približa.
• Poskrbite, da so gumbi in povezave lahko zadeti. WCAG 2.2 AA določa spodnjo mejo 24 krat 24 CSS slikovnih pik (ali zadostni razmik); okoli 44 slikovnih pik je udobnejših za palec.
• Pustite prostor med sosednjimi povezavami, da ljudje ne zadenejo napačne.

Tabele in podatki

Široke tabele so najtežji del odzivne aplikacije. Možnosti, po vrstnem redu prednosti: prikažite manj stolpcev na telefonih, spremenite vsako vrstico v kartico ali postavite tabelo v vodoravno pomično vsebnik s pripeto prvo kolono. Izberite glede na to, kaj morajo ljudje primerjati.

Slike in mediji

Uporabite max-width: 100% in height: auto, manjše datoteke pošljite na majhne zaslone s srcset ter nastavite širino in višino, da se postavitev ne premika. Vgrajeni videi in zemljevidi potrebujejo odzivni ovoj, da ohranijo razmerje stranic. Manjše slike naredijo tudi strani hitrejše – glejte kako pohitriti spletno stran.

Obrazci

Oznake naj bodo nad polji, polja naj bodo čez celo širino in uporabite prave vrste vnosa (type="email", type="tel", inputmode="numeric"), da telefoni pokažejo ustrezno tipkovnico. Gumb za pošiljanje postavite tja, kamor seže palec, in ga ohranite viden, ko se odpre tipkovnica.

Interakcije samo ob premiku miške

Telefoni nimajo premika. Namigi, spustni meniji in predogledi, ki se prikažejo samo ob premiku, so za uporabnike na dotik nevidni. Naredite jih, da delujejo tudi ob dotiku.

Pozivi, ki delujejo

Za novo gradnjo to povejte vnaprej:

Zgradi mobile-first. Na telefonih ena kolona, od širine tablice dve koloni, na namizju polna postavitev. Brez vodoravnega pomikanja pri širini 320 px, osnovno besedilo vsaj 16 px, tarče za dotik vsaj 44 px, gumb za meni na majhnih zaslonih in tabele, ki se na telefonih spremenijo v kartice.

Za obstoječo stran opišite, kar vidite:

Na telefonih se stran /pricing pomika vstran in tri kartice paketov so stisnjene druga ob drugi. Pod 768 px zloži kartice navpično, primerjalno tabelo naj se vodoravno pomika v lastnem vsebniku s pripeto kolono funkcij, namizna postavitev pa naj ostane nespremenjena.

Preveri vsako stran pri širini 375 px. Naštej vse, kar se prelije, prekrije, je manjše od 16 px besedila ali 44 px tarč za dotik ali deluje samo ob premiku miške, nato popravi vsako posebej.

Korak za korakom

1. Potrdite oznako viewport v glavi strani.
2. Preizkusite pri širini 320–375 px v načinu naprave brskalnika ali v predogledu v velikosti telefona. Pomaknite vsako stran od vrha do dna.
3. Najprej odpravite vodoravno pomikanje. Poiščite element, ki je preširok; vse drugo je težko presoditi, dokler ta ni odpravljen.
4. Uredite navigacijo: gumb za meni, ključna dejanja vidna.
5. Preverite besedilo, tarče za dotik in obrazce na vsakem ključnem toku – registracija, iskanje, blagajna, stik.
6. Uredite tabele in medije: kartice ali pomična vsebnika, odzivne slike in vdelave.
7. Preverite vmesne velikosti. Počasi povlecite širino od telefona do namizja; postavitve se pogosto pokvarijo okoli širine tablice.
8. Preizkusite na pravem telefonu. Emulatorji zgrešijo stvari, kot so tipkovnica na zaslonu, ki prekrije gumb, zareze in hitrost strani na mobilnem prenosu.

Pogoste napake

• Preizkušanje samo pri eni velikosti telefona. Preverite majhen telefon, velik telefon in tablico.
• Skrivanje vsebine na mobilnem, da se prilega. Google indeksira mobilno različico, uporabniki telefonov pa želijo iste informacije.
• Onemogočanje povečave v oznaki viewport.
• Slike za namizje na telefonih, kar stane čas nalaganja in podatke.
• Kopičenje elementov s fiksnim položajem: lepljiva glava, pasica o piškotih in klepetalni balonček lahko prekrijejo pol zaslona telefona.
• Pojavna okna, ki jih ni mogoče zapreti na majhnem zaslonu, ker je gumb za zaprtje zunaj vidnega polja.

Kontrolni seznam za mobilne naprave

• Oznaka meta viewport je prisotna; povečava ni onemogočena
• Na nobeni strani ni vodoravnega pomikanja pri 320 px
• Osnovno besedilo ~16 px; vnosna polja ne sprožijo povečave
• Tarče za dotik so dovolj velike in razmaknjene
• Meni deluje na telefonih in s tipkovnico
• Tabele so berljive na telefonih (kartice, manj stolpcev ali pomični vsebnik)
• Slike in vdelave se skrčijo; poslane so ustrezno velike datoteke
• Obrazci uporabljajo prave vrste vnosa; gumb za pošiljanje je dosegljiv
• Nič pomembnega ni odvisno od premika miške
• Preizkušeno vsaj na enem pravem telefonu

Odzivna postavitev je tudi del dostopnosti: WCAG zahteva, da vsebina deluje pri širini 320 px in pri 200-odstotni povečavi. Če gradite aplikacijo, ki jo ljudje dnevno uporabljajo na telefonih, kako zgraditi mobilno prijazno spletno aplikacijo gre dlje, vključno z nameščljivimi PWA.

Odzivno oblikovanje na Mythex

Mythex gradi odzivne spletne aplikacije, na paketu Pro pa jih lahko zavije v aplikacije za Android in iPhone. V delovnem prostoru kliknite ikono telefona nad predogledom (Switch to Mobile), da si aplikacijo ogledate v okvirju v velikosti telefona, in povlecite rob okvirja, da preizkusite druge širine (Predogled in koda). Dokumentacija ima kratek začetni poziv za popravljanje postavitve na majhnih zaslonih v pozivih za mobilno odzivnost. Preverite tudi na pravem telefonu – odprite objavljeni URL ali delite povezavo za predogled in jo odprite na telefonu.

Vprašanja