Vandret rulning på mobil

Silktide tjekker, om dine sider ruller vandret på mobiltelefoner. Indholdet bør passe til bredden på en lille skærm, så besøgende kun behøver at rulle nedad.

Hvorfor dette er vigtigt

Når en side er bredere end skærmen, ligger en del af hver tekstlinje uden for synsfeltet, og læseren skal trække frem og tilbage for at følge indholdet. Det er trættende for alle og en reel barriere for personer med nedsat syn (som ofte også forstørrer siden) og personer med motoriske funktionsnedsættelser. WCAG-succeskriterium 1.4.10 (Ombrydning, i ) kræver, at indhold passer til en skærm med en bredde på 320 pixel uden rulning i to dimensioner.

Som regel er siden som helhed i orden, og det er ét element, der skaber overløb – en bred tabel, et billede med en fast bredde, en indlejret video eller en lang streng, der ikke kan ombrydes, såsom en URL.

Sådan løser du det

Åbn siden på en telefon (eller gør dit browservindue 320 pixel smalt), og find det, der stikker ud over højre kant.
Ret det problematiske element med responsiv :

/* Element med fast bredde gør siden bredere end skærmen */
img.hero { width: 600px; }

/* Rettet: skalerer ned, så det passer på smalle skærme */
img.hero { max-width: 100%; height: auto; }

Lad brede datatabeller rulle inde i deres egen beholder (overflow-x: auto), så resten af siden stadig passer til skærmen.
Indhold, der reelt kræver et todimensionelt layout, såsom kort og diagrammer, må gerne rulle – hvis det er alt, fundet viser, kan du det.

Sådan tester Silktide dette

Indlæs siden som en mobilenhed.
Mål, hvor langt siden strækker sig ud over skærmens højre kant. Overløb under 10 pixel ignoreres som en afrundingsfejl.
Klassificer overløbet efter, hvor mange enheder det påvirker, fra et mindre overløb, der kun påvirker små telefoner (320 pixel brede, såsom en iPhone 5), til overløb, der er bredt nok til at påvirke store telefoner (414 pixel brede, såsom en iPhone 7 Plus).

Fejlfinding

Det relaterede tjek af mobildesign

Dette tjek rapporterer vandret overløb på sider, der ellers er mobilvenlige. Sider, der slet ikke forsøger at understøtte mobil – intet , lille tekst, ekstremt overløb – rapporteres i stedet af Mobilt zoom og rulning, hvor løsningen er et responsivt redesign.

Jeg kan ikke se nogen rulning

Mindre overløb kan være usynligt på større telefoner. Test ved en bredde på 320 pixel – browserens udviklerværktøjer lader dig angive den præcise bredde – og se efter noget, der krydser den højre kant.