Sgrolio llorweddol ar ffôn symudol

Mae Silktide yn gwirio a yw eich tudalennau'n sgrolio i'r ochr ar ffonau symudol. Dylai'r cynnwys ffitio o fewn lled sgrin fach, fel mai dim ond i lawr y bydd ymwelwyr yn sgrolio.

Pam mae hyn yn bwysig

Pan fo tudalen yn lletach na'r sgrin, mae rhan o bob llinell o destun y tu allan i'r golwg, ac mae'n rhaid i'r darllenydd lusgo'n ôl ac ymlaen i ddilyn y cynnwys. Mae hynny'n flinedig i bawb ac yn rhwystr gwirioneddol i bobl â golwg gwan (sydd yn aml hefyd yn chwyddo'r dudalen) a phobl â namau echddygol. Mae maen prawf llwyddiant WCAG 1.4.10 (Reflow, o ) yn ei gwneud yn ofynnol i gynnwys ffitio ar sgrin 320 picsel o led heb sgrolio mewn dau ddimensiwn.

Fel arfer, mae'r dudalen gyfan yn iawn ac mae un elfen yn achosi'r gorlif - tabl llydan, delwedd â lled sefydlog, fideo wedi'i fewnosod, neu linyn hir na ellir ei dorri, fel URL.

Sut i'w drwsio

Agorwch y dudalen ar ffôn (neu culhewch ffenestr eich porwr i 320 picsel) a dewch o hyd i'r hyn sy'n ymwthio allan dros yr ymyl dde.
Trwsiwch yr elfen sy'n achosi'r broblem gyda ymatebol:

/* Mae elfen â lled sefydlog yn gwneud y dudalen yn lletach na'r sgrin */
img.hero { width: 600px; }

/* Wedi'i drwsio: yn graddio i lawr i ffitio sgriniau cul */
img.hero { max-width: 100%; height: auto; }

Ar gyfer tablau data llydan, gadewch i'r tabl sgrolio y tu mewn i'w gynhwysydd ei hun (overflow-x: auto) fel bod gweddill y dudalen yn dal i ffitio'r sgrin.
Caniateir i gynnwys sydd wir angen cynllun dau ddimensiwn, fel mapiau a diagramau, sgrolio - os mai dyna'r cyfan y mae'r canfyddiad yn ei ddangos, gallwch ei .

Sut mae Silktide yn profi hyn

Llwythwch y dudalen fel dyfais symudol.
Mesurwch pa mor bell y mae'r dudalen yn ymestyn y tu hwnt i ymyl dde'r sgrin. Anwybyddir gorlif o dan 10 picsel fel gwall talgrynnu.
Dosbarthwch y gorlif yn ôl faint o ddyfeisiau y mae'n effeithio arnynt, o orlif bach sy'n effeithio ar ffonau bach yn unig (320 picsel o led, fel iPhone 5) hyd at orlif sy'n ddigon llydan i effeithio ar ffonau mawr (414 picsel o led, fel iPhone 7 Plus).

Datrys problemau

Y gwiriad dylunio symudol cysylltiedig

Mae'r gwiriad hwn yn adrodd am orlif llorweddol ar dudalennau sydd fel arall yn addas ar gyfer ffonau symudol. Yn hytrach, mae tudalennau nad ydynt yn ceisio cynnal ffonau symudol o gwbl - dim , testun bach iawn, gorlif eithafol - yn cael eu hadrodd gan Chwyddo a sgrolio ar ffôn symudol, lle mai ailgynllunio ymatebol yw'r ateb.

Alla i ddim gweld unrhyw sgrolio

Gall gorlifoedd bach fod yn anweledig ar ffonau mwy. Profwch ar led o 320 picsel - mae offer datblygwr porwr yn gadael i chi osod yr union led - a chwiliwch am unrhyw beth sy'n croesi'r ymyl dde.