Horisontal scrolling på mobil

Silktide kontrollerer om sidene dine kan scrolles sidelengs på mobiltelefoner. Innholdet bør passe til bredden på en liten skjerm, slik at besøkende bare trenger å scrolle nedover.

Hvorfor dette er viktig

Når en side er bredere enn skjermen, er deler av hver tekstlinje skjult, og leseren må dra frem og tilbake for å følge innholdet. Dette er slitsomt for alle og en reell barriere for personer med nedsatt syn (som ofte også forstørrer siden) og personer med motoriske funksjonsnedsettelser. WCAG-suksesskriterium 1.4.10 (Reflow, i ) krever at innholdet skal passe på en 320 piksler bred skjerm uten scrolling i to dimensjoner.

Vanligvis er siden som helhet i orden, og det er ett element som tvinger frem horisontal scrolling – en bred tabell, et bilde med fast bredde, en innebygd video eller en lang tekststreng som ikke kan brytes, for eksempel en URL.

Slik løser du problemet

Åpne siden på en telefon (eller gjør nettleservinduet 320 piksler bredt) og finn ut hva som stikker ut over høyre kant.
Rett opp det problematiske elementet med responsiv :

\/* Element med fast bredde gjør siden bredere enn skjermen *\/
img.hero { width: 600px; }

\/* Fast: skaleres ned for å passe på smale skjermer *\/
img.hero { max-width: 100%; height: auto; }

For brede datatabeller kan du la tabellen scrolle i sin egen beholder (overflow-x: auto), slik at resten av siden fortsatt passer på skjermen.
Innhold som faktisk trenger en todimensjonal layout, for eksempel kart og diagrammer, kan tillates å scrolle – hvis dette er alt funnet viser, kan du det.

Slik tester Silktide dette

Last inn siden som en mobilenhet.
Mål hvor langt siden strekker seg forbi høyre kant av skjermen. Horisontal scrolling på under 10 piksler ignoreres som en avrundingsfeil.
Klassifiser den horisontale scrollingen etter hvor mange enheter den påvirker, fra en liten overskridelse som bare påvirker små telefoner (320 piksler brede, som en iPhone 5) til horisontal scrolling som er stor nok til å påvirke store telefoner (414 piksler brede, som en iPhone 7 Plus).

Feilsøking

Den relaterte kontrollen for mobildesign

Denne kontrollen rapporterer horisontal scrolling på sider som ellers er tilpasset mobil. Sider som ikke forsøker å støtte mobil i det hele tatt – uten , med liten tekst og kraftig horisontal scrolling – rapporteres i stedet av Mobilzoom og scrolling, der løsningen er en responsiv redesign.

Jeg kan ikke se noe scrolling

Liten horisontal scrolling kan være usynlig på større telefoner. Test med en bredde på 320 piksler – utviklerverktøyene i nettleseren lar deg angi nøyaktig bredde – og se etter alt som krysser høyre kant.