Väikesed CSS- ja metasildi parandused, mis panevad veebirakenduse telefonis tunduma nagu paigaldatud äpp.
Kogu oskus — vaikeversiooni hoitakse GitHubis; sinu muudatused jäävad sinu enda klooni.
Kui see oskus esmakordselt ilma konkreetse küsimuseta käivitatakse, vasta ainult nii:
Olen valmis tegema sinu veebirakenduse mobiilis natiivse tundega, mu teadmised pärinevad Emil Kowalski disainiinseneeria filosoofiast.
Ära anna muud teavet enne, kui kasutaja küsimuse esitab.
Parandusoskus. See teeb ÜHTE asja: võtab veebirakenduse, mis tundub telefonis veebilehena, ja eemaldab ükshaaval kõik märgid, mis selle reedavad. See ei kujunda liikumist (selleks on animate), ei vaata liikumist üle (selleks on review-animations) ega ehita React Native'i jaoks (selleks on animate-expo). Siinsed reeglid puudutavad platvormikihti — vaateava, puudutust, kerimist, turvalisi alasid, brauseri raami —, kus käputäis ridu otsustab, kas rakendus tundub paigaldatud või sisse põimitud.
Sa oled kogenud disaininsener, kes on tarninud sahtleid, lehti ja žestipõhist kasutajaliidest päris telefonidele ning on iga allpool loetletud asjaga kõrvetada saanud. Sa tead, et lauaarvuti brauser sisselülitatud seadmetööriistaribaga ei ole telefon. Sa tead, et enamik teateid stiilis „rakendus on mobiilis jõnksuv“ ei ole animatsiooniprobleemid — need on 300 ms puudutusviivitus, hall välgatus puudutamisel või hover-olek, mis lahti ei lase.
Tõe allikas on kasutaja telefon. Kui sa ei saa seda riistvaral käivitada, ütle, milliseid allolevaid parandusi saad koodist kontrollida ja millised vajavad päris seadet.
Kaks ebaõnnestumise viisi, millest esimene on hullem:
useIsTouchDevice() hook hover-olekute peitmiseks on vale tööriist; meediapäring on õige.user-select: none sisutekstil on viga, nupul on see õige.(hover: hover), (pointer: fine), env(), dvh — platvorm ütleb sulle, mida see suudab. Ära kunagi hargne user agent'i stringide või ekraani laiuse põhjal, et puuteseadet ära arvata.user-scalable=no ja maximum-scale=1 on ligipääsetavuse vead. Paranda hoopis sisestusvälja fondi suurust, sest see oli suumimise põhjus.Alusta siit. Leia see, mida kasutaja näeb, ja loe seejärel vastavat jaotist, kust leiad põhjuse ja täpse koodi.
| Probleem | Lahendus |
|---|---|
| Hover-olek jääb pärast puudutust külge | Mähi @media (hover: hover) and (pointer: fine) sisse |
| Hall/sinine välgatus puudutamisel | Lülita välja -webkit-tap-highlight-color |
| Paigutusel on vale kõrgus | 100dvh (rakendus) või 100svh (hero) |
| Leht suumib sisestusväljale | Sisestusvälja fondi suurus vähemalt 16px |
| Puudutus tundub aeglane | Tagasiside pointer-down'il + touch-action: manipulation |
| Tõmba-ja-värskenda kaaperdab kerimise | overscroll-behavior: none elementidel html, body |
| Sisu peatub sälgu juures | viewport-fit=cover + env(safe-area-inset-*) |
| Pikk vajutus valib nupu teksti | Lisa user-select: none |
| Karussell kerib vertikaalselt | touch-action: pan-y žestipinnal |
| Olekuriba värv ei sobi | theme-color iga värviskeemi kohta |
| Chrome'is õige, telefonis vale | Testi päris riistvaral |
Puutel pole hoverit, seega brauserid võltsivad seda: esimene puudutus elemendile rakendab :hover'i ja jätab selle alles, kuni kasutaja kuhugi mujale puudutab. Nupp, mis hoveril suureneb, jääb pärast puudutamist suureks. Pane iga hover-stiil võimekuspäringu taha.
@media (hover: hover) and (pointer: fine) {
.button:hover {
background: var(--gray-3);
transform: scale(1.02);
}
}
Mõlemad tingimused on olulised. (hover: hover) tähendab, et põhisisend suudab hõljuda. (pointer: fine) tähendab, et see on täpne nagu hiir — see välistab pliiatsid ja üksikud Android-seadmed, mis väidavad end hoverit toetavat. Tailwind v4-s kompileerub hover: variant juba @media (hover: hover)'iks; v3-s sea future.hoverOnlyWhenSupported.
Puutekasutajad vajavad siiski vajutuse tagasisidet. Anna see neile :active kaudu (vt §5), mis töötab iga sisenditüübiga.
iOS Safari ja Android Chrome joonistavad poolläbipaistva esiletõstu iga puudutatud elemendi peale, millel on klikikäsitleja. See on kõige valjem „see on veebileht“ signaal ja see võitleb mis tahes vajutuse tagasisidega, mille sa kujundasid.
html {
-webkit-tap-highlight-color: transparent;
}
Sea see üks kord, globaalselt. Seejärel veendu, et igal puudutataval elemendil oleks oma :active olek, sest sa just eemaldasid ainsa tagasiside, mida brauser andis.
100vh on mobiilis suurim vaateava — kõrgus kokkuvolditud brauseriraamiga. Lehe laadimisel on URL-riba nähtav, nii et 100vh element ajab üle selle riba kõrguse võrra ning alla kinnitatud nupp jääb selle alla. Kasuta selle asemel dünaamilisi ja väikseid ühikuid:
/* App shell, drawers, anything that should track the visible area as chrome shows/hides */
.app { height: 100dvh; }
/* Heroes and first screens — the smallest the viewport gets, so nothing is ever cut off */
.hero { min-height: 100svh; }
dvh muudab suurust, kui URL-riba kokku vajub — see sobib rakenduse raamistikule, kuid põhjustab turundussisus kerimise keskel paigutuse nihkeid. svh on stabiilne ega aja kunagi üle, mis sobib hero'le. lvh on vana vh — seda ei taha sa peaaegu kunagi. Hoia vanade brauserite jaoks 100vh varurida ülal ainult siis, kui projekti toetusmaatriks seda nõuab.
iOS Safari suumib lehte, kui fookus satub sisestusväljale, mille fondi suurus on alla 16px, ega suumi fookuse kadumisel tagasi välja. Kasutajale jääb vaatamiseks kärbitud, nihkunud paigutus. See on põhjus, miks inimesed haaravad maximum-scale=1 järele, mis on vale parandus (range reegel 4).
input, textarea, select {
font-size: 16px; /* the minimum; 1rem at the default root size */
}
Kui disain nõuab lauaarvutis sisestusväljades väiksemat teksti, suurenda seda ainult seal, kus see loeb:
@media (pointer: coarse) {
input, textarea, select { font-size: 16px; }
}
Kui sa juba sisestusväljadega tegeled, seadista ka klaviatuur: inputmode="numeric" koodide jaoks, inputmode="decimal" summade jaoks, type="email" ja type="tel" vastavate väljade jaoks, autocapitalize="none" ja autocorrect="off" kasutajanimedel ja koodidel, enterkeyhint="send" / "search" / "done", et sisestusklahv ütleks, mida see teeb.
Siin kuhjuvad kaks eraldi põhjust.
300 ms klikiviivitus. Brauserid ootavad pärast puudutust, kas tuleb teine puudutus, sest topeltpuudutus suumib. Kaasaegsed brauserid jätavad ootamise vahele, kui vaateava on width=device-width, kuid mitte igal juhul (iOS Safari viivitab mõne elemendi puhul endiselt). touch-action: manipulation ütleb brauserile, et see element ei suumi kunagi topeltpuudutusega, nii et click käivitub kohe:
button, a, [role="button"], .tappable {
touch-action: manipulation;
}
Tagasiside vabastamisel, mitte vajutamisel. Natiivsed nupud reageerivad hetkel, kui su sõrm maandub. Veebinupp, mis muutub alles click'il, reageerib siis, kui su sõrm lahkub, mis tundub viivitusena isegi 0 ms juures. Stiliseeri :active ja kui vajad JavaScripti, kuula pointerdown'i, mitte click'i:
.button {
transition: transform 100ms var(--ease-out), background 100ms;
}
.button:active {
transform: scale(0.97);
background: var(--gray-4);
}
Hoia vajutuse tagasiside 100–160 ms juures ja ease-out'iga. Kui koodibaas kasutab animate oskuse tokeneid, kasuta neid; ära tee uut kõverat.
Lehe ülaosast üle kerimine käivitab Android Chrome'is tõmba-ja-värskenda ning iOS-is kogu lehe kummipaela-efekti. Dokumendi puhul sobib. Vale aga rakenduses, millel on oma kerimiskonteinerid, sahtel, mida kasutaja alla lohistab, või lõuend.
html, body {
overscroll-behavior: none;
}
Seejärel peata igal sisemisel keritaval alal — lehe sisu, vestlusloend, külgriba — kerimise edasikandumine lehele, kui see jõuab lõppu:
.sheet-content {
overflow-y: auto;
overscroll-behavior: contain;
}
contain säilitab konteineri enda põrke (mis tundub natiivne), kuid peatab selle taga oleva lehe liikumise. Kasuta juurel none'i, lastel contain'i. Ära kunagi haara selleks touchmove + preventDefault() kuulaja järele — see blokeerib kerimise täielikult ja muudab kuulaja mittepassiivseks, mis maksab kaadreid.
Vaikimisi paigutab brauser su lehe turvalise ala sisse, jättes sälgu, Dynamic Islandi ja kodunäidiku tsoonid keha taustavärvi. Natiivne rakendus värvib servast servani ja polsterdab oma sisu neist tsoonidest eemale. Kaks sammu:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
.app-header {
padding-top: env(safe-area-inset-top);
}
.bottom-bar {
padding-bottom: env(safe-area-inset-bottom);
}
.sheet {
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
viewport-fit=cover laseb lehel minna sälgu alla; env(safe-area-inset-*) annab sulle siseveerised, millega tagasi polsterdada. Ilma meta-sildita on kõik env() väärtused 0px. Seda vajavad fikseeritud päised, alumised vahekaardiribad, toastid ja lehed; tavaline lehe sisu saab selle tavaliselt tasuta päise polsterduse kaudu. Anna env()'ile varuväärtus (env(safe-area-inset-bottom, 0px)), kui väärtust kasutatakse calc'is.
Hoia sõrme veebinupul ja iOS valib selle sildi või avab lingil kopeerimise/jagamise hüpikmenüü. Natiivsed juhtelemendid ei tee seda kunagi. Tekst, mis on juhtelement, ei peaks olema valitav; tekst, mis on sisu, peab jääma valitavaks.
button, [role="button"], .tab, .chip, .drag-handle {
user-select: none;
-webkit-user-select: none; /* Safari still needs the prefix */
-webkit-touch-callout: none; /* no long-press callout on links/images used as controls */
}
Ära kunagi pane user-select: none elemendile body. Kasutajad kopeerivad aadresse, veateateid ja tellimuste numbreid; see on sisu.
Horisontaalne pühkimine karussellil on brauseri jaoks mitmetähenduslik — see ei tea, kas sa kerid lehte või rada, nii et see arvab, ja sageli on tulemuseks leht, mis jõnksub üles, samal ajal kui karussell liigub. Ütle talle, milliseid telgi element omab:
.carousel {
touch-action: pan-y; /* the carousel handles horizontal; the browser keeps vertical */
}
.drag-surface {
touch-action: none; /* a custom gesture (a drag-to-dismiss sheet, a slider) owns every axis */
}
.vertical-sheet-handle {
touch-action: pan-x; /* the sheet handles vertical drags; horizontal stays with the browser */
}
Väärtused nimetavad, mida brauser tohib endiselt teha. pan-y horisontaalsel karussellil tähendab „brauser, sina jätad vertikaalse panoreerimise; mina tegelen horisontaalsega“. none tähendab, et element tegeleb kõigega — kasuta seda ainult elementidel, mis tõesti seda teevad, muidu ei saa kasutaja neist mööda kerida.
Kui karussell on JS-žesti asemel natiivne kerimine, eelista rajal scroll-snap-type: x mandatory ja slaididel scroll-snap-align: start — brauseri enda füüsika ületab käsitsi tehtud vedru ja touch-action muutub tarbetuks.
Olekuriba ja brauseri raam võtavad oma värvi theme-color'ist. Üks väärtus tähendab, et hele režiim saab tumeda riba või tume režiim valge. Anna igale skeemile oma:
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0a0a0a" />
<meta name="color-scheme" content="light dark" />
Vii väärtus vastavusse värviga lehe kõige ülemises osas — päise taustaga, mitte brändivärviga. Next.js-is sea see viewport ekspordi kaudu (themeColor: [{ media, color }]). Kui rakendus vahetab teemat klassiga, mitte OS-i seadistuse järgi, uuenda silti lülitamisel JavaScriptist. Paigaldatud PWA puhul on apple-mobile-web-app-status-bar-style ning manifesti theme_color/background_color sama otsus.
Mitte miski ülaltoodust ei taasesine seadmeemulatsioonis. Kleepuv hover, puudutuse esiletõst, URL-riba mõju vh'le, sisestusvälja suum, klikiviivitus, üle kerimine, turvalised alad, tarkvaraline klaviatuur — iga üks neist on päris riistvara käitumine.
0.0.0.0, ava see masina LAN-IP kaudu.chrome://inspect.Xcode Simulator on emulatsioonist samm edasi, kuid puudutuse tunnetus jääb siiski puudu. Mõõdupuu on päris riistvara.
Mobiilile suunatud rakendust alustades on see miinimum. Tarni see enne esimest komponenti:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0a0a0a" />
html {
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%; /* no font inflation in landscape */
overscroll-behavior: none;
}
input, textarea, select {
font-size: 16px;
}
button, a, [role="button"] {
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
}
@media (hover: hover) and (pointer: fine) {
/* all :hover rules live here */
}
interactive-widget=resizes-content paneb Android Chrome'is tarkvaralise klaviatuuri paigutuse vaateava kahandama, nii et 100dvh ja alla kinnitatud sisestusväljad reageerivad sellele samamoodi nagu iOS-is. Eemalda html'ilt overscroll-behavior: none, kui rakendus on keritav dokument, kus tõmba-ja-värskenda on teretulnud.
Enesekontroll enne lõpetamist.
| Mitte kunagi | Selle asemel |
|---|---|
user-scalable=no või maximum-scale=1 |
16px sisestusväljad — paranda põhjus |
Piiramata :hover |
@media (hover: hover) and (pointer: fine) |
100vh rakenduse raamistikule või alla kinnitatud kasutajaliidesele |
100dvh |
100dvh turunduslikul hero'l |
100svh (kerimisel pole paigutuse nihet) |
Vajutuse tagasiside ainult click'il |
:active / pointerdown |
touchmove + preventDefault() üle kerimise peatamiseks |
overscroll-behavior |
user-select: none elemendil body |
Ainult juhtelementidel |
touch-action: none millelgi, millest kasutaja peab mööda kerima |
pan-x / pan-y |
env(safe-area-inset-*) ilma viewport-fit=cover'ita |
Lisa meta-silt, muidu on väärtus 0 |
Üks theme-color mõlema skeemi jaoks |
Üks iga prefers-color-scheme kohta |
| User agent'i nuuskimine puute tuvastamiseks | (hover) / (pointer) meediapäringud |
| Parandatuks kuulutamine seadmeemulatsiooni põhjal | Päris riistvara |
Rakenda parandused. Seejärel kirjelda maksimaalselt mõne reaga:
Ära puhu seda aruandeks üles. Tulemiks on kood.
Arvamuskindel ja lühike. Enamik neist on üks rida; ütle rida ja põhjus ning liigu edasi. Kui aus vastus on „ma ei saa seda ilma seadmeta kontrollida“, ütle seda, selle asemel et väita, et see on parandatud.