Hvordan tilpasse et bord for mobile enheter. Å rotere telefonen er en siste utvei
I Aspro: Deretter kan du fra og med versjon 1.1.7 tilpasse tabeller for mobilversjonen. Det er nødvendig å gjøre endringer i kildekoden til siden - legg til en klasse som er ansvarlig for tilpasningsevnen til tabeller.
En enkel tabell i mobilversjonen går utover siden.
For å gjøre tabellen responsiv, gå til å redigere siden der tabellen ble lagt til. Gå deretter til redigeringsmodus for kildekode.
Før åpningsmerket
Lagre endringene dine.
Nå ruller bordet og går ikke utenfor rammen.
Ved horisontal rulling går ikke tabellen utover rammen, men ved rulling til høyre i mobilversjonen åpnes en sidemeny. For å sikre at menyen ikke forstyrrer arbeidet med tabellen, må du gjøre endringer i sidekoden.
Du må legge til "swipeignore"-klassen i taggen
Lagre endringene dine.
Nå, når du ruller tabellen til høyre, åpnes ikke sidemenyen, noe som forstyrret arbeidet med tabellen.
Du kan skjule sidemenyen når du blar til høyre og på andre sider. Du må legge til "swipeignore"-klassen i taggen
Bruker du tabeller på nettsiden din, må de også være tilpasset mobile enheter. Jeg bruker to tilpasningsalternativer - komprimering og ordbryting + ordne tabeller i en kolonne.
Det første alternativet passer for alle tabeller med flere kolonner; Jeg bruker det andre alternativet på noen nettsteder i frontend. Det er en slik svakhet ved å vise menyer i form av en tabell, men når oppløsningen reduseres, komprimeres de så mye at de forårsaker indignasjon blant brukeren. Konvertering til én kolonne med en liten oppløsning er en god løsning, men igjen, det er ikke verdt å bruke det for alle tabeller.
Grunnleggende alternativ
Så for de fleste tabellene på nettstedet bruker jeg følgende css-kode:
@medieskjerm og (max-width:1000px)(td(word-break:break-all;)
Den spesifiserer at ord som ikke passer inn i blokken skal starte på en ny linje hvis oppløsningen er mindre enn 1000 px. Oppløsning 1000 er et eksempel, se på nettstedene dine, for noen er det fornuftig å sette oppløsningen lavere.
Du kan oppnå god tabellvisning ved å bruke dobbel kode i CSS. Jeg bruker parallelt:
@medieskjerm og (max-width:700px)(img(max-width:96% !important;height:auto !important;) iframe, textarea, input, button, submit, video, object, embed(max-width: 99 % !viktig;) table, span, div, ins(max-width:100 % !important;)
Den sier at med en oppløsning på mindre enn 700 px vises tabellen i 100 % størrelse, det vil si at den er komprimert, men opptar hele blokken i bredden. Egenskapen!important indikerer at den vil gjelde for alle oppløsninger mindre enn 700px.
Tilpasning i én kolonne
Det er vanskeligere å tilpasse tabellen slik at den vises i én kolonne med lav oppløsning. Passer ikke til alle bord, men ofte nødvendig. Først spesifiser den opprinnelige klassen for tabellen, for eksempel,
Merk. I OS X Lion (på Mac) er rullefelt skjult som standard og vises bare når de er i bruk (selv om satt til "overflyt:rull" eller auto).
Denne gangen skal vi berøre et lignende tema, men vi tar en mer kompleks tabell, med overskrifter.
For å strukturere data (for eksempel kostnader for tjenester eller driftstimer) og enkelt presentere dem for brukeren, er tabeller ideelle; i moderne tid bør de tilpasses smarttelefoner og nettbrett, ellers kan viktige elementer som er lagret i celler skjules. skjermen.
La oss tegne en tabell over leveringstjenesteplanen med skiftbud og priser, og legge til aria-label-attributtet (tekstetikett) til datacellene.
| Leveringstid | kurer | Betaling med kort | Kostnad for levering |
|---|---|---|---|
| 8:00-12:00 | Nikolay | Nei | 20 gni. |
| 12:00-18:00 | Vadim | Ja | 50 gni. |
| 18:00-23:00 | Alexei | Ja | 120 gni. |
| 1:00-6:00 | Eugene | Nei | 90 gni. |
Table.delivery (width: 100%; border: 0px; border-collapse: collapse;) table.delivery thead (font-weight: bold;) table.delivery td (polstring: 0.6rem 1rem; border-bottom: 1px solid # e8e9eb;)
Utseendet til bordet på en PC med en fast oppløsning på 1140 piksler. vil se noe slikt ut.
Når du reduserer skjermoppløsningen til 334 piksler. cellene vil krympe så mye som mulig og la noe av informasjonen være skjult.
Ved hjelp av CSS kan vi oppnå ønsket effekt - å dele tabellen i blokker som er forståelige for den besøkende med en skjermoppløsning på mindre enn 800 piksler. Bare legg til følgende kode til de allerede opprettede stilene:
@medieskjerm og (max-width: 800px) ( table.delivery thead ( display: none; ) table.delivery tr ( display: block; margin-bottom: 1rem; border-bottom: 2px solid #e8e9eb; ) table.delivery td ( display: block; text-align: right; ) table.delivery td:before ( content: attr(aria-label); float: left; font-weight: bold; ) )
I skjermbildet nedenfor kan du tydelig evaluere overlegenheten til denne metoden.
Takk for din oppmerksomhet! Ikke glem å rangere artikkelen!
Å vise omfangsrike data på en liten skjerm er alltid et puslespill. Hvilke måter kan du løse det på og hvordan skal et praktisk bord se ut på en mobiltelefon?
Det er verdt å merke seg at tabeller ofte strekker seg utover skjermen, ikke bare på mobile enheter: det hender at de inneholder flere kolonner eller rader enn det passer på en stor skjerm eller til og med flere. Men jo mindre skjermen er, desto mer sannsynlig er det at brukervennlighetsproblemer vil oppstå.
Nøkkelelementene i en tabellvisning er innholdssammenheng og meningsfulle attributter. Begge er spesielt viktige for mobile bord. Først bør du lage et praktisk bord for store skjermer, og deretter lage en versjon for små skjermer. Et slikt behov kan være en utmerket grunn til å avgrense innholdet i tabellen og gjøre den mer praktisk for alle brukere.
Antall tabellkolonner som skal vises på en mobilskjerm avhenger av bredden, og innholdet skal være tydelig uten behov for å bruke zoom.
For komplekse eller lange tekster, for eksempel i sammenligningstabeller, vil kun 2 kolonner passe på en smal mobilskjerm. Og hvis tabellen er fylt mest med tall, kan kolonnene gjøres smalere og får derfor plass til flere.
National Rugby League-statistikken består av tall, så 11 kolonner passer komfortabelt på en mobilskjerm uten behov for horisontal rulling. Vær oppmerksom på at dette resultatet oppnås ved å bruke kun motstanderlagets logo i den første kolonnen og forkortelser, som kanskje ikke er tydelige for de uinnvidde. Imidlertid er det bare rugbyfans som er interessert i så detaljert statistikk om spillere.
Å rotere telefonen er en siste utvei
Hvis du roterer telefonen horisontalt, får flere kolonner plass på skjermen. Men samtidig reduseres antallet linjer, og brukere kan synes det er irriterende å måtte rotere smarttelefonen (spesielt hvis den har rotasjonslås). Tenk nøye gjennom om den store bredden på bordet rettferdiggjør disse ulempene.
For å sammenligne kredittkort på Citis nettsted, må brukerne følge instruksjonene: "Snu telefonen horisontalt for å fortsette å sammenligne kredittkort." Samtidig, når du roterer, er det meste av skjermen okkupert av enorme bilder av kredittkort, som er festet på plass når du ruller, og etterlater svært lite plass til selve tabellinnholdet. Dette er en feil på mange mobilnettsteder: hvis bilder på en desktop kan være en god overskrift for en kolonne, er de nødvendige på en mobil.
I enhver tabell som spenner over mer enn én vertikal skjerm, hjelper klebrige kolonneoverskrifter brukeren til å unngå forvirring om konteksten.
I sammenligningstabellen med Best.Buy til venstre er verken kolonnene eller overskriftene registrert, og dataene er vanskelige å lese. Til høyre er hvordan denne tabellen ser ut når den rulles, uten noen synlig forklaring.
Selv om det generelt er uønsket på både mobil og desktop, er det relativt akseptabelt for store bord på mobile enheter. Når dataene ikke får plass på skjermen, kan besøkende måtte bruke dem. Imidlertid er det nødvendig i dette tilfellet: det bør være åpenbart at dette ikke er alle tilgjengelige data. Som med glidebrytere, formidler piler og beskårne elementer denne informasjonen tydeligst. Noen ganger brukes prikker, men de er vanligvis vanskeligere å legge merke til og forstå.
På eBag-nettstedet er den siste kolonnen med produkter kuttet av, slik at brukerne forstår at horisontal rulling er tilgjengelig.
Subarus nettsted bruker prikker og piler over tabellen for å vise brukerne at det er flere skjermer med innhold tilgjengelig. Prikkene skaper litt forvirring fordi to av dem er uthevet for å vise "nåværende plassering" (det vil si de to kolonnene som for øyeblikket er synlige). I tillegg er det bedre å plassere pilene ikke over bordet, men rett i det.
Hvis brukere må ty til horisontal rulling, bør kolonnen lengst til venstre, som vanligvis inneholder radoverskrifter, fryses slik at brukerne alltid ser radoverskriftene.
Fidelity fikset vedleggsnavnene og kolonneoverskriftene. Den siste kolonnen til høyre er beskåret for å hjelpe brukere å forstå at horisontal rulling er tilgjengelig.
Officeworks.com.au har fikset den første produktkolonnen slik at brukerne kan sammenligne alle andre alternativer mot den. Produktet i den første kolonnen fungerer som et referansepunkt for sammenligning, og brukere kan erstatte det med noe annet. Piler plassert direkte i tabellen gjør det tydelig at dataene kan rulles til venstre og høyre.
Hvis dataene ikke får plass på skjermen, vil brukerne sannsynligvis ikke ha tid eller lyst til å utforske dem fullstendig. Så spørsmålet er hvordan de skal gi dem kun den informasjonen de trenger. Svaret på dette spørsmålet avhenger av oppgaven og typen data. Her er to strategier for å begrense mengden data i forskjellige situasjoner:
- Brukeren velger dataene han er interessert i før han ser den.
- Brukeren velger dataene han er interessert i mens han ser på den.
Den første tilnærmingen fungerer når brukeren trenger å se dataene, men ikke sammenligne dem, og han velger bare det han trenger før dataene lastes. For eksempel kan han bare være interessert i egenskapene til en bestemt bil, de ernæringsmessige egenskapene til en bestemt rett eller statistikken for en bestemt spiller, og brukeren sammenligner dem ikke med andre alternativer.
For å se ernæringsinformasjon for Jamba Juice, må besøkende velge drikken de er interessert i for å se informasjon om den. Small/Medium/Large-bryteren lar deg velge ønsket alternativ, men lar deg ikke sammenligne dem. For å forstå for eksempel forskjellen i kalorier mellom et lite og et middels glass, må brukeren først huske antall kalorier for det lille glasset, deretter bytte til det middels, slå opp antall kalorier for det og trekke fra en fra den andre selv - mye mentalt arbeid som de fleste er for late til å gjøre .
Den andre strategien er å gi brukeren kontroll over anmeldelsen mens de blar gjennom dataene. En bruker ønsker for eksempel å se likhetene eller forskjellene mellom to alternativer, mens en annen ønsker å vite spesifikke egenskaper ved produktene, som bagasjeromskapasitet eller sikkerhetsfunksjoner, men er ikke interessert i forskjellen i støynivå mellom to biler. Muligheten til å velge rader og kolonner som skal vises, lar brukere fokusere på funksjonene som betyr noe for dem.
På Dell-nettstedet velger brukere produktspesifikasjoner som interesserer dem fra menyen øverst på siden. Venstre: Som standard vises alle egenskaper. I sentrum: brukeren velger de han trenger. Høyre: Bare det han valgte vises.
Hvis tabellen inneholder data som kan grupperes etter kategori, gjør du det og lar mobilbrukere:
- få en generell forståelse av hvilke typer data som er tilgjengelige i tabellen;
- få direkte tilgang til informasjonen av interesse.
På Samsung.com kan sammenligningstabeller vise alle spesifikasjoner, eller bare likhetene mellom produktene, eller bare forskjellene, eller brukervalgbare kriterier. Nettstedet grupperer data med lignende attributter, slik at du kan velge datasett av interesse. Samtidig gir datagrupper en oversikt over innholdet på siden, og forteller brukerne hvilken produktinformasjon som er tilgjengelig.