Pikseliai ir Ems: vartotojai keičia šrifto dydį

Žiniatinklio kūrėjai mėgsta gerą šventą karą, nesvarbu, ar tai viršija mūsų mėgstamas „JavaScript“ sistemas, ar tokius principus kaip rūpesčių atskyrimas. Vienas dalykas, kuris mane visada domino, yra kova dėl CSS vienetų, būtent tarp pikselių ir santykinių vienetų, tokių kaip rems ir ems.

Daugybė interneto dizainerių ir kūrėjų daugelį metų matuoja daiktus taškais. Jie yra gana lengvai suprantami - vienas taškas koduose susiejamas su vienu tašku ekrane arba bent jau buvo įpratęs. Tačiau taškai yra absoliutus dydis, tai reiškia, kad jie nekinta atsižvelgiant į vartotojo nuostatas (išskyrus naršyklės mastelį, kuris gali pakeisti viską). Tai nėra puiku prieinamumui. Įveskite ems ir rems, du šrifto dydžio santykinius vienetus, kurie suteikia prieinamumo pranašumų, kurių trūksta taškais, tačiau, aišku, trūksta intuityvios semantikos. Natūralu, kad bėgant metams buvo dešimtys tinklaraščių įrašų, kuriuose buvo diskutuojama dėl vieno ar kito požiūrio (Beno Fraino „Just Use Pixels“ ir Nicolas Hoizey „Žmonės nekeičia numatytojo 16 pikselių šrifto dydžio savo naršyklėje“, tik norėčiau paminėti keletą ).

Interneto archyve mes turime žmonių iš abiejų šio leidimo pusių, ir kai iškilo klausimas, kaip pereiti nuo pikselių prie rėmėjų ir ems, mes neturėjome daug rimtų įrodymų apie vieną ar kitą. Daugelis senų argumentų remiasi nepatikrintomis prielaidomis; „Pro pixel“ minia daro prielaidą, kad beveik niekas nekeičia savo naršyklės ar OS šrifto dydžio, o rem / em rėmėjai daro prielaidą, kad tai daro daug žmonių. Atrodė, kad jei mes priimtume sprendimą, kuris galėtų paveikti naudotojų patirtį, turėtume duomenų, kad galėtume sukurti atsargines kopijas.

Klausimas buvo „Kiek vartotojų naršo pagrindinėje interneto archyvo svetainėje naudodamiesi numatytuoju šrifto dydžiu, išskyrus įprastą 16 pikselių reikšmę?“ Žinodami tai, mes nustatytume, kiek vartotojų paveiktų dydžio nustatymas santykiniais vienetais, tokiais kaip rems / ems. .

Taikydami toliau aprašytą metodiką nustatėme, kad atsakymas yra 3,08% mūsų vartotojų. Tai gana didelis skaičius, didesnis nei dauguma naršyklių, tokių kaip „Internet Explorer“, „Edge“ ar „Opera Mini“, rinkos dalies.

Duomenys

Mes naudojame „Google Analytics“ (nors ir labai anonimišką, kad apsaugotume savo vartotojų privatumą), todėl pasirinkome siųsti šrifto dydį naudodamiesi tinkintu aspektu, kuris leidžia šiek tiek sugrupuoti auditoriją.

| Dydis | Vartotojų procentas |
| ------- | ---------------- |
| 16 taškų | 96,92% |
| 20 taškų | 0,50% |
| 19,2 taškų | 0,42% |
| 25,6 taškų | 0,23% |
| 17 taškų | 0,18% |
| 24 taškų | 0,15% |
| 20,8 taškų | 0,15% |
| 14,4 taškų | 0,10% |
| 18 taškų | 0,10% |
| 18,4 taško | 0,08% |
| 18,56 taškų | 0,07% |
| 14 taškų | 0,07% |

Kaip matote, dydžiai yra gana įvairūs, įskaitant porą, mažesnę nei 16 taškų. Tai nustebino, nes manėme, kad vienintelis realus atvejis yra regos negalią turintys vartotojai, kuriems skaitomumui reikia didesnių šriftų. Gali būti, kad vartotojai nustato mažesnius dydžius, kad ekrane tilptų daugiau turinio, galbūt todėl, kad jie naudoja mažą monitorių, arba taip gali būti dėl naršyklių, nustatančių ne 16 pikselių numatytuosius nustatymus.

| Naršyklė | Vartotojų procentas |
| --------------------------- | ---------------- |
| „Chrome“ (darbalaukyje) | 37,81% |
| „Android“ internetinė peržiūra | 12,89% |
| „Opera Mini“ | 10,88% |
| „Firefox“ (darbalaukyje) | 9,17% |
| „Samsung“ internetas | 5,56% |
| „Internet Explorer“ (darbalaukyje) | 5,26% |
| „Chrome“ (mobiliesiems) | 5,16% |
| „Android“ naršyklė | 4,35% |
| „Safari“ (darbalaukyje) | 3,26% |
| UC naršyklė | 2,35% |
| Opera (darbalaukis) | 1,07% |
| „Internet Explorer“ (mobilusis) | 0,32% |
| „Safari“ (mobilusis / planšetinis kompiuteris) | 0,29% |

Taigi, kokias naršykles naudoja šie žmonės? Kai kurie rezultatai čia labai tiksliai atitinka populiaciją (pvz., „Desktop Chrome“), tačiau „Android Webview“, „Opera Mini“, „Samsung Internet“ ir „Desktop IE“ yra neproporcingai daug ne 16 pikselių vartotojų. „Chrome“ ir „Safari“ mobiliųjų versijų nėra penketuke. Mažas „iOS Safari“ skaičius greičiausiai kyla dėl prastos paramos pritaikant šrifto dydį. Paskutinį kartą testuodamas niekaip negalėjau rasti būdo, kaip pakeisti šrifto dydį (OS nustatymas neturi įtakos naršyklei)!

Kodas

Idėja čia yra gana paprasta: man reikėjo sužinoti naršyklės naudojamą dydį be jokių autoriaus apibrėžtų stilių ir nustatyti, kad tai būtų GA tinkintas aspektas. Tačiau mes naudojame „Bootstrap“, kuris elementui taiko bazinį šrifto dydį 62,5% (10 pikselių, kai numatytoji reikšmė yra 16 pikselių).

Aš apsvarstiau du galimus metodus:

1: apskaičiuokite stilių, pagrįstą pagrindiniu elementu, ir tada pakeiskite „Bootstrap“ 62,5% modifikaciją.

const original = window.getComputedStyle (document.documentElement) .fontSize;
const skaičius = parseFloat (originalus, 10);
const unit = original.replace (/ (\ d *. \ d +) | \ d + /, '');
const defaultFontSize = (skaičius * 1,6) + vienetas;

Nr. 2: sukurkite

ir priskirkite jai vidutinio dydžio šrifto dydį, kad jo dydis atsistatytų į numatytąjį.

const div = document.createElement ('div');
div.style.fontSize = 'vidutinė';
document.body.appendChild (div);
const defaultFontSize = window.getComputedStyle (div) .fontSize;
document.body.removeChild (div);

Nr. 2 atrodo aiškiau, nes jis nesiremia stebuklingais skaičiais ar matematika, tačiau pašalina vartotojus, kurie gali nustatyti pasirinktinį šrifto dydį naudodami naršyklės plėtinius ar pasirinktinius stilių lapus, o ne naršyklės / OS parametrus. Beje, jei vykdote šį testą svetainėje, kurios pradiniame elemente jau nustatytas aiškus taškų dydis (t. Y. Šrifto dydis: 16 pikselių), galite būti priversti eiti šiuo keliu.

Į Archyvo testą aš patekau su Nr. 1. Tačiau jis turi savų nepatogumų: senesnėse „Internet Explorer“ versijose yra apvalinimo problemų, dėl kurių „Bootstrap“ 62,5% dydžio šrifto dydis lemia tokias vertes kaip 9,92 taškų, o ne 10 taškų. Atšaukę šį skaičiavimą, gauname 15,888 taškų, o ne 16 taškų. Mes pasirinkome sekti 15,888 taškų vertes GA, bet analizuodami vartotojus jas vertiname kaip lygiavertes 16 taškų.

Štai kaip viskas atrodo sudėjus:

funkcija setDefaultFontSizeCustomDimension () {
  // Ignoruokite labai senas naršykles.
  if (! ('getComputedStyle' lange)) {
    grįžti;
  }
  // Gaukite  šrifto dydį.
  const original = window.getComputedStyle (document.documentElement) .fontSize;
  // Panaikinkite 62,5% dydį, taikomą „Bootstrap CSS“.
  const numPixels = parseFloat (originalus, 10);
  const unit = original.replace (/ (\ d * \. \ d +) | \ d + /, '');
  const defaultFontSize = (numPixels * 1.6) + vienetas;
  // Mūsų „Analytics“ integracija šiek tiek skiriasi, tačiau čia pateikiamas standartinis nuorodų stilius.
  ga ('set', 'dimension1', defaultFontSize);
}

REDAGAVIMAS: Jei jums įdomu, kodėl aš taip pat negalvojau apie naršyklės mastelį, taip yra todėl, kad šiuolaikinės naršyklės pritaiko mastelį modifikuodamos „atskaitos taško“ dydį, pakeisdamos, kiek realių taškų turi vienas CSS „taškas“. Taigi padidinimas keičia elemento dydį realiaisiais taškais, tačiau CSS jo apskaičiuota vertė paliekama tokia pati, kokia buvo anksčiau, tai reiškia, kad mūsų matavimai veiks tik gerai.

Tačiau dėl tokio „atskaitos taško“ elgesio tiek ekrano vaizdo elementų tankis, tiek mastelio keitimas JS vaizduojami ta pačia reikšme: window.devicePixelRatio. Ne „Retina MacBook“ esant 200% priartinimui, būtų galima gauti tą pačią „devicePixelRatio“ vertę, kaip ir „Retina MacBook“, esant 100%, todėl stebėdami ją, nepateikiame daug įžvalgų.

„Takeaway“

Nuo to laiko mūsų komanda atliko keletą kokybiškesnių tyrimų apie tai, kaip vartotojai linkę naudoti tokias funkcijas kaip naršyklės mastelio keitimas ir pasirinktiniai šrifto dydžiai, ir šiuo metu keičiasi į santykinius vienetus daugumai Archive.org elementų.

Aš raginu kitas įmones ir ne pelno siekiančias organizacijas atlikti tą patį testą. Tai tikrai nesudėtinga nustatyti daugelyje svetainių (ypač jei šaknies šrifto dydis jau yra sąlyginis) ir duos aiškių rezultatų, kurie padės nukreipti jūsų dizainą ir kurti sprendimus. Jei nuo 2 iki 3% (ar daugiau!) Jūsų vartotojų pasikliauja pasirinktiniu šrifto dydžiu, turėtumėte žinoti, kad galite palaikyti tą vartotojo nuostatą arba priimti sąmoningą sprendimą jo nepalaikyti. Atlikti ką nors mažesnį yra atvirai neatsakinga, ypač atsižvelgiant į tai, kad didesnio dydžio šrifto vartotojai gali naudoti tuos dydžius, kad kompensuotų regos negalią.

Turbūt fantazija tikėtis, kad tai užbaigs šventą karą tarp pikselių ir rems / ems. Geriau, kai žiniatinklio profesionalai praleidžia laiką renkant tikrus vartotojų duomenis ir priimant pagrįstus sprendimus, užuot ginčijantis tarpusavyje. Bet vėlgi, kur čia linksmybės?