Pikseļi pret Ems: lietotāji mainās fonta lielumu

Web izstrādātāji mīl labu svētu karu neatkarīgi no tā, vai tas notiek virs mūsu iecienītākajiem JavaScript ietvariem vai tādiem principiem kā bažu nodalīšana. Viena no lietām, kas mani vienmēr ir interesējusi, ir cīņa par CSS vienībām, proti, starp pikseļiem un relatīvajām vienībām, piemēram, rems un ems.

Gadu gaitā vairums tīmekļa dizaineru un izstrādātāju mēra lietas pikseļos. Tie ir diezgan viegli saprotami - viens pikselis kodu kartēs līdz vienam pikselim ekrānā vai vismaz tā bija pierasts. Bet pikseļi ir absolūts izmērs, kas nozīmē, ka tie nemainās, reaģējot uz lietotāju vēlmēm (izņemot pārlūka tālummaiņu, kas var ignorēt visu). Tas nav lieliski, lai piekļūtu. Ievadiet ems un rems, divas fonta lieluma relatīvās vienības, kas nodrošina piekļuves priekšrocības, kurām trūkst pikseļu, bet tām acīmredzami trūkst intuitīvas semantikas. Protams, gadu gaitā ir bijis desmitiem emuāru ierakstu, kuros tiek diskutēts par vienu vai otru pieeju (Bena Fraina “Just Use Pixels” un Nicolas Hoizey “Cilvēki nemaina noklusējuma 16 pikseļu fonta lielumu savā pārlūkprogrammā”, lai tikai nosauktu dažus ).

Interneta arhīvā mums ir daži cilvēki abās numura pusēs, un, kad radās jautājums par pāreju no pikseļiem uz rems un ems, mums nebija daudz pārliecinošu pierādījumu par vienu vai otru pusi. Daudzi vecie argumenti balstās uz nepārbaudītiem pieņēmumiem; pro-pixel pūlis pieņem, ka gandrīz neviens nemaina pārlūkprogrammas vai OS fonta lielumu, savukārt rem / em atbalstītāji pieņem, ka to dara daudzi cilvēki. Likās, ka, ja mēs pieņemtu lēmumu, kas varētu ietekmēt lietotāju pieredzi mūsu lietotājiem, mums vajadzētu būt dažiem datiem, lai to dublētu.

Jautājums bija “Cik lietotāju pārlūko galveno interneta arhīva vietni ar noklusējuma fonta lielumu, kas nav kopējais 16 pikseļu lielums?” Zinot to, mēs noteiktu, cik daudz lietotāju ietekmētu lieluma noteikšana ar relatīvām vienībām, piemēram, rems / ems. .

Izmantojot zemāk aprakstīto metodiku, mēs noskaidrojām, ka atbilde ir 3,08% no mūsu lietotājiem. Tas ir diezgan liels skaitlis, kas pārsniedz lielāko daļu tādu pārlūkprogrammu kā Internet Explorer, Edge vai Opera Mini tirgus daļas.

Dati

Mēs izmantojam Google Analytics (lai arī tas ir ļoti anonīms, lai aizsargātu mūsu lietotāju privātumu), tāpēc mēs izvēlējāmies sūtīt fonta lielumu, izmantojot pielāgotu kategoriju, kas ļauj jauki sadalīt auditoriju.

| Izmērs | Lietotāju procents |
| ------- | ---------------- |
| 16 pikseļi | 96,92% |
| 20 pikseļi | 0,50% |
| 19,2 pikseļi | 0,42% |
| 25,6 pikseļi | 0,23% |
| 17 pikseļi | 0,18% |
| 24 pikseļi | 0,15% |
| 20,8 pikseļi | 0,15% |
| 14,4 pikseļi | 0,10% |
| 18 pikseļi | 0,10% |
| 18,4 pikseļi | 0,08% |
| 18,56 pikseļi | 0,07% |
| 14 pikseļi | 0,07% |

Kā redzat, ir diezgan plašs izmēru klāsts, ieskaitot pāris, kuru izmērs ir mazāks par 16 pikseļiem. Tas bija pārsteidzoši, jo mēs pieņēmām, ka vienīgais reālās lietošanas gadījums ir lietotāji ar redzes traucējumiem, kuriem lasāmībai nepieciešami lielāki burtu izmēri. Iespējams, ka lietotāji iestata mazākus izmērus, lai ekrānā ietilptu vairāk satura, varbūt tāpēc, ka viņi izmanto nelielu monitoru, vai arī tas var būt saistīts ar pārlūkprogrammām, kas noklusējuma iestatījumus nosaka nevis 16 pikseļu formātā.

| Pārlūkprogramma | Lietotāju procents |
| --------------------------- | ---------------- |
| Chrome (darbvirsmas) | 37,81% |
| Android tīmekļa skats | 12,89% |
| Opera Mini | 10,88% |
| Firefox (darbvirsmas) | 9,17% |
| Samsung internets | 5,56% |
| Internet Explorer (darbvirsma) | 5,26% |
| Chrome (mobilais) | 5,16% |
| Android pārlūks | 4,35% |
| Safari (darbvirsmas) | 3,26% |
| UC pārlūks | 2,35% |
| Opera (darbvirsma) | 1,07% |
| Internet Explorer (mobilais) | 0,32% |
| Safari (mobilais / planšetdators) | 0,29% |

Kādas pārlūkprogrammas šie ļaudis izmanto? Daži šeit iegūtie rezultāti diezgan precīzi atbilst kopējam iedzīvotāju skaitam (piemēram, Desktop Chrome), taču Android Webview, Opera Mini, Samsung Internet un Desktop IE ir nesamērīgs lietotāju skaits, kas nav 16 pikseļi. Piecu labāko skaitā nav Chrome un Safari mobilo versiju. iOS Safari mazie skaitļi, iespējams, ir tā sliktā atbalsta dēļ fonta lieluma pielāgošanai. Pēdējo reizi testējot, es vispār nevarēju atrast veidu, kā mainīt fonta lielumu (OS iestatījums neietekmē pārlūku)!

Kods

Ideja šeit ir diezgan vienkārša: man vajadzēja noskaidrot pārlūka izmantoto izmēru bez autoru noteiktiem stiliem un iestatīt to kā GA pielāgoto dimensiju. Tomēr mēs izmantojam Bootstrap, kas elementam piemēro pamata fonta lielumu 62,5% (10 pikseļi, ja noklusējuma vērtība ir 16 pikseļi).

Es apsvēru divas iespējamās pieejas:

# 1: aprēķiniet stilu, pamatojoties uz saknes elementu, un pēc tam apgrieziet Bootstrap 62,5% modifikāciju.

const original = window.getComputedStyle (document.documentElement) .fontSize;
const skaitlis = parseFloat (oriģināls, 10);
const unit = original.replace (/ (\ d *. \ d +) | \ d + /, '');
const defaultFontSize = (skaitlis * 1,6) + vienība;

Nr. 2: izveidojiet

un piešķiriet tam vidēja fonta lielumu, lai atiestatītu tā noklusējuma lielumu.

const div = document.createElement ('div');
div.style.fontSize = 'vidēja';
document.body.appendChild (div);
const defaultFontSize = window.getComputedStyle (div) .fontSize;
document.body.removeChild (div);

Nr. 2 šķiet skaidrāks, jo tas nepaļaujas uz maģiskiem skaitļiem vai matemātiku, bet tas izslēdz lietotājus, kuri var iestatīt pielāgotu fonta lielumu, izmantojot pārlūka paplašinājumus vai pielāgotas stila lapas, nevis pārlūka / OS iestatījumus. Tomēr, ja jūs vadāt šo testu vietnē, kuras saknes elementā jau ir noteikts precīzs pikseļu lielums (piemēram, fonta lielums: 16 pikseļi), jūs, iespējams, būsit spiests iet šo ceļu.

Arhīva pārbaudei es devos ar 1. numuru. Tomēr tam ir savas nelielas neērtības: vecākām Internet Explorer versijām ir noapaļošanas problēmas, kas rada tādas vērtības kā 9,92 pikseļi, nevis 10 pikseļi, kad tiek piemērots Bootstrap 62,5% fonta lielums. Atceļot šo aprēķinu, beigās mēs iegūstam 15,888 pikseļus, nevis 16 pikseļus. Mēs izvēlējāmies izsekot 15,888 pikseļu vērtībām GA, bet, analizējot lietotājus, tās uzskatīja par līdzvērtīgām 16 pikseļiem.

Lūk, kā izskatās, kad tas viss ir salikts:

funkcija setDefaultFontSizeCustomDimension () {
  // Ignorējiet ļoti vecas pārlūkprogrammas.
  if (! (logā 'getComputedStyle')) {
    atgriešanās;
  }
  // Iegūstiet  fonta lielumu.
  const original = window.getComputedStyle (document.documentElement) .fontSize;
  // Atsauciet sāknēšanas CSS izmantoto izmēru 62,5%.
  const numPixels = parseFloat (oriģināls, 10);
  const unit = original.replace (/ (\ d * \. \ d +) | \ d + /, '');
  const defaultFontSize = (numPixels * 1.6) + vienība;
  // Mūsu Analytics integrācija ir nedaudz atšķirīga, taču šeit ir atsauces standarta stils.
  ga ('set', 'dimension1', defaultFontSize);
}

REDIĢĒT: Ja jums rodas jautājums, kāpēc es arī neuzskatīju par pārlūka tālummaiņu, tas notiek tāpēc, ka mūsdienu pārlūkprogrammas pietuvinās, mainot “atsauces pikseļa” lielumu, mainot, cik reālu pikseļu attēlo viens CSS “pikselis”. Tātad tālummaiņa maina elementa izmēru reālo pikseļu izteiksmē, bet CSS tā aprēķināto vērtību atstāj tādu pašu kā iepriekš, tas nozīmē, ka mūsu mērījumi darbosies tikai lieliski.

Šīs “atsauces pikseļa” uzvedības rezultātā gan ekrāna pikseļu blīvums, gan tālummaiņas līmenis tiek parādīti vienā un tajā pašā vērtībā JS: window.devicePixelRatio. MacBook, kas nav tīklene ar 200% tālummaiņu, varētu radīt tādu pašu ierīcesPixelRatio vērtību kā 100% tīklenes MacBook, tāpēc tā izsekošana nesniedz mums daudz ieskatu.

Takeaway

Kopš tā laika mūsu komanda ir veikusi dažus kvalitatīvākus pētījumus par to, kā lietotāji mēdz izmantot tādas funkcijas kā pārlūka tālummaiņa un pielāgoti fontu izmēri, un šobrīd notiek pārslēgšanās uz relatīvajām vienībām lielākajai daļai Archive.org elementu.

Es mudinu citus uzņēmumus un bezpeļņas organizācijas veikt šo pašu testu. Tas ir patiešām viegli iestatāms lielākajai daļai vietņu (īpaši, ja saknes fonta lielums jau ir relatīvs), un tas sniegs skaidrus rezultātus, kas palīdzēs virzīt jūsu lēmumu pieņemšanu par dizainu un attīstību. Ja 2 līdz 3% (vai vairāk!) Lietotāju paļaujas uz pielāgotu fonta lielumu, jums tas jāzina, lai jūs varētu vai nu atbalstīt šo lietotāja izvēli, vai arī pieņemt apzinātu lēmumu to neatbalstīt. Darīt kaut ko mazāk ir atklāti atbildīgs, it īpaši ņemot vērā, ka lietotāji ar lielākiem burtu izmēriem var izmantot šos izmērus redzes traucējumu kompensēšanai.

Droši vien ir fantāzija cerēt, ka tas izbeidz svēto karu starp pikseļiem un rems / ems. Es labprātāk redzētu, kā tīmekļa profesionāļi tērē laiku, lai savāktu reālus lietotāju datus un pieņemtu apzinātus lēmumus, nevis strīdētos viens ar otru. Bet tad atkal, kur ir tā izklaide?