Zoom for faste og responsive sites

Link: https://alastairc.ac/2015/10/zoom-for-fixed-and-responsive-sites/

Jeg overvejede også at kalde dette “Hvorfor zoom sutter på mobile”, som er det største problem med zoom & web-udvikling.
For at forstå, hvorfor jeg vil gå gennem forskellige måder zoom virker på desktop og mobile.

Stationære/bærbare computere

Browser-zoom er standard på tværs af bestyrelsen for browsere, der på desktop-operativsystemer som Windows og OSX. Et par browsere har en funktion til kun at øge størrelsen af teksten, men det er allerede blevet et historisk artefakt, er du nødt til at grave op i grænsefladen. Det er også meget svært (måske umuligt?) for udviklere at give mulighed for både text-dimensionering og zoom i praksis, så jeg har tænkt mig at sætte det til side.

Browser-zoom dybest set virker ved at udvide alt. På 200% zoom 1 pixel bliver 2×2 pixels. I. e. dobbelt så bredt og dobbelt så høj.

Zoom ind på et fast layout

Traditionelt er dette medfører vandret rulning, fordi layoutet af webstedet udvider ud over din opfattelse af det (browser-vinduet). Kan du forestille dig det lidt ligesom en traditionel skærmforstørrer.

<video-kontrol=”kontrol” width=”300″ height=”150″>

Dette er meget vanskeligt for mennesker, der har brug for at gøre tingene større (og måske også bruge et forstørrelsesglas, så du har dobbelt-rulle). Jeg ville gerne se at blive en svigte på WCAG dobbelt-A.

Zoom ind på et responsive layout

For en lydhør site zoom i stadig øger alt, forskellen er, at stedet kan bruge medier forespørgsler for at tilpasse layoutet. Hvis din browser vindue er 1000 pixels på skærmen, og du zoome ind til 200%, dit effektiv browser bredde er 500 pixels.

Du kan derefter få en media query, der tilpasser layoutet til 500 pixels bredt, for eksempel, ved at gøre kolonner, der kan stables oven i hinanden i stedet for at være ved siden af hinanden.

Derfor er en person, zoom i ikke få vandret rulning, og alting er større.

<video-kontrol=”kontrol” width=”300″ height=”150″>

Ved tilstrækkelig høj zoom, og stedet ser ud til at være den samme, som det ville på en mobil enhed. Jeg tror, det er, en god ting for tilgængelighed.

Mobile (mindre skærm) enheder

Mobiltelefoner (med det mener jeg, lille-ish touch-screen-enheder, der kører iOS eller Android) har en mere kompleks måde at lave layout, hvor det dokument, bredde og skærmens bredde er forskellige. Se PPK ‘ s fremragende forklaring for mere om dette.

Zoome ind på mobil med et fast layout

For ikke-responsive sites lille-screen-enheder har tendens til at starte ‘zoomet ud’, så du kan se det hele layout, som er presset ind i omkring 1000 pixels bredt. Du kan derefter knibe-zoom, og det virker som et forstørrelsesglas, du er nødt til at rulle rundt, eller dobbelt-trykke på noget for at zoome til det.

https://alastairc.ac/wp-content/uploads/2015/10/zoom-ios-fixed.mov

Zoome ind på mobil med et responsive layout

For et responsive site browser har en vis bredde (fx 320px bred til en iPhone 5), og den gældende medier forespørgsel er brugt til layout. Forudsat, at sitet giver mulighed for pinch-zoom (og bør), så du straks få vandret rulning.

Fordi zoom øger størrelsen af side (dokument bredde) i skærm-bredde, det virker som et fast layout, lige begyndt på en større indledende størrelse.

<video-kontrol=”kontrol” width=”300″ height=”150″>

Det er ikke godt for tilgængelighed. Der er behov for en mekanisme til at gøre tingene (især tekst) større uden straks forårsager at rulle. Det er teknisk set ikke er en fejl i WCAG 2, men det er helt sikkert et problem. iOS har en indbygget forstørrelse, men det betyder det samme som zoom.

Jeg tror, det er en user-agent problemet, og at den bedste metode ville være at have en tilgængelighed indstilling, der lader dig øge i størrelse, uden at rulle vandret.

Nogle enheder giver mulighed for at øge tekst-størrelsen (fx Firefox på Android), men i de fleste tilfælde (Safari, Chrome) det gælder ikke for web-indhold.

Kun Opera på Android (tak for tip Shwetank Dixit) implementerer dette i en form, hvor pinch-zoom vil zoome layout, uden for det vindue, men reflow teksten inden for viewport. Det er lidt ligesom at have {max-width: 100vw} på afsnit, overskrifter, lister etc.

Noter

De layouts, der anvendes i videoer kan tilgås på: fast og lydhør, de er afhængige af flex-boks for layout.

Jeg har brugt iOS (Safari), da de konkrete eksempler ovenfor, men som er mobile browsere har en tendens til at arbejde på samme måde til beregning af layout og zoom, sandsynligvis fordi de fleste var på et tidspunkt baseret på webkit.