Vaakasuuntainen vieritys mobiililaitteilla
Silktide tarkistaa, vierittyvätkö sivusi sivusuunnassa matkapuhelimissa. Sisällön tulisi mahtua pienen näytön leveyteen, jotta kävijöiden tarvitsee vierittää vain alaspäin.
Miksi tämä on tärkeää
Kun sivu on näyttöä leveämpi, osa jokaisesta tekstirivistä jää näkymättömiin, ja lukijan on vedettävä sisältöä edestakaisin seuratakseen sitä. Tämä on kaikille rasittavaa ja muodostaa todellisen esteen heikkonäköisille (jotka usein myös suurentavat sivua) sekä motorisia toimintarajoitteita omaaville henkilöille. WCAG-menestyskriteeri 1.4.10 (Uudelleenjuoksutus, , ) edellyttää, että sisältö mahtuu 320 pikseliä leveälle näytölle ilman vieritystä kahteen suuntaan.
Yleensä sivu kokonaisuutena on kunnossa, mutta yksi elementti aiheuttaa ylivuodon – leveä taulukko, kiinteäleveyksinen kuva, upotettu video tai pitkä katkeamaton merkkijono, kuten URL-osoite.
Näin korjaat sen
- Avaa sivu puhelimessa (tai kavennna selainikkunasi 320 pikseliin) ja etsi, mikä ulottuu oikean reunan yli.
- Korjaa ongelman aiheuttava elementti responsiivisella :
/* Kiinteäleveyksinen elementti tekee sivusta näyttöä leveämmän */
img.hero { width: 600px; }
/* Korjattu: skaalautuu mahtumaan kapeille näytöille */
img.hero { max-width: 100%; height: auto; }
- Anna leveiden datataulukoiden vierittyä oman säilönsä sisällä
(
overflow-x: auto), jotta sivun muu sisältö mahtuu edelleen näytölle. - Sisältö, joka aidosti tarvitsee kaksiulotteisen asettelun, kuten kartat ja kaaviot, saa vierittyä – jos havainto koskee vain tätä, voit sen.
Näin Silktide testaa tämän
- Lataa sivu mobiililaitteena.
- Mittaa, kuinka paljon sivu ulottuu näytön oikean reunan yli. Alle 10 pikselin ylivuoto jätetään huomiotta pyöristysvirheenä.
- Luokittele ylivuoto sen perusteella, kuinka moneen laitteeseen se vaikuttaa: lievästä ylivuodosta, joka vaikuttaa vain pieniin puhelimiin (320 pikseliä leveät, kuten iPhone 5), ylivuotoon, joka on riittävän leveä vaikuttaakseen suuriin puhelimiin (414 pikseliä leveät, kuten iPhone 7 Plus).
Vianmääritys
Aiheeseen liittyvä mobiilisuunnittelun tarkistus
Tämä tarkistus ilmoittaa vaakasuuntaisesta ylivuodosta sivuilla, jotka ovat muuten mobiiliystävällisiä. Sivut, jotka eivät pyri tukemaan mobiililaitteita lainkaan – ei , pieni teksti, huomattava ylivuoto – ilmoitetaan sen sijaan tarkistuksessa Mobiililaitteen zoomaus ja vieritys, jossa korjauksena on responsiivinen uudelleensuunnittelu.
En näe mitään vieritystä
Pienet ylivuodot voivat olla näkymättömiä suuremmilla puhelimilla. Testaa 320 pikselin leveydellä – selaimen kehitystyökaluilla voit asettaa tarkan leveyden – ja etsi kaikkea, mikä ylittää oikean reunan.