Responsive dizayn: tamoyillar va viewport meta teg

Qisqacha: Responsive dizayn — bitta sahifa telefonda ham, kompyuterda ham qulay ko'rinishi uchun ekran eniga o'zi moslashadi. U uch tarkibga tayanadi: foizli yoki fr li egiluvchan to'r, konteynerdan chiqmaydigan rasmlar (max-width: 100%) va ekran eniga qarab qoida qo'shadigan media query'lar. Hammasi ishlashi uchun head da <meta name="viewport" content="width=device-width, initial-scale=1"> bo'lishi shart — usiz telefon o'zini 980 piksellik kompyuter deb biladi. Zoom'ni esa hech qachon o'chirmang.

Bu darsda

• Responsive dizaynning uch tarkibini nomlab, har birini misol bilan ko'rsata olasiz.
• Qotgan px maketni foizli to'rga "maqsad ÷ kontekst" formulasi bilan o'girasiz.
• Viewport qatori CSS'ga qanday ta'sir qilishini o'lchab ko'rsatasiz.
• Layout viewport va visual viewport farqini, zoom qaysi birini o'zgartirishini tushuntirasiz.
• DevTools qurilma rejimida sahifani 320 pikselgacha tekshirasiz va uning cheklovlarini bilasiz.

Oldin bilishingiz kerak: head anatomiyasi va viewport, Viewport birliklari, Matematik funksiyalar, Rasm va media, Layout naqshlari.

1. Nega bu kerak?

Layout naqshlari darsida flex va grid bilan to'liq sahifa tuzishni tugatdik. Endi savol: o'sha sahifa qaysi ekranda ochiladi?

Jasur aka «Bahor» saytini kompyuterda ko'rdi va xursand bo'ldi. Keyin mehmonlaridan biri telefonda menyuni ochdi: matn mayda, yon panel ustunni qisib qo'ygan, sahifa o'ngga suriladi. Ikkinchi mehmon planshetda ochdi — u yerda esa ikki chetda katta bo'sh joy.

O'zbekistonda saytlarni asosan telefonda ochishadi — ehtimol, siz ham bu darsni telefonda o'qiyapsiz. Demak har sahifa kamida uch xil enda ishlashi kerak: 360 piksellik telefon, 768 piksellik planshet va 1280 piksellik kompyuter. Oradagi har bir en ham.

Choyxonadagi dasturxonni eslang. Ikki kishi kelsa — bitta stol. O'n kishi kelsa — stollar birlashtiriladi. Taomlar o'sha-o'sha, faqat joylashuv mehmonlar soniga moslashadi. Responsive dizayn (responsive web design) ham shunday: HTML va kontent bitta, joylashuv esa ekran eniga moslashadi.

Bu darsda responsive dizaynning tamoyillarini o'rganamiz. Keyingi to'rt darsda — uning har bir quroli: media query, mobile-first, fluid tipografiya va media query'siz layout.

2. Qisqa tarix va uch tarkib

2.1 Alohida mobil sayt davri

Smartfonlar ommalashganda ko'p kompaniya ikkinchi sayt yasadi: m. bilan boshlanadigan alohida mobil versiya. Ikki sayt — ikki barobar ish. Bittasida narx yangilanadi, ikkinchisida eskisi qoladi. Planshet chiqdi — uchinchi versiya kerakmi?

2010-yilda dizayner Ethan Marcotte A List Apart jurnalida "Responsive Web Design" maqolasini yozdi. G'oyasi: bitta sayt, lekin u har ekranga o'zi moslashadi. Atama shu maqoladan kelgan.

2.2 Uch tarkib

Marcotte responsive sahifani uch narsadan yig'di. Bugun ham asos shu:

Bularga bitta shart qo'shiladi — viewport meta teg. Usiz uchala tarkib ham telefonda ishlamaydi. Undan boshlaymiz.

3. Viewport meta teg: CSS nimani "ko'radi"

3.1 Eslatma: bitta qator

head anatomiyasi darsida bu qatorni yozgan edingiz:

<meta name="viewport" content="width=device-width, initial-scale=1">

U yerda tarixini, qismlarini va document.documentElement.clientWidth bilan o'lchashni ko'rdik. O'sha darsda "bu buyruq sahifaning CSS piksellardagi kengligini ko'rsatadi" degan edik. Endi CSS tomonini qo'shamiz: aynan shu son CSS uchun ekran eni. % ota enidan olinadi, lekin eng yuqoridagi otaning eni shu sondan boshlanadi. vw shu sondan hisoblanadi. Media query'lar ham shu songa qaraydi.

3.2 Qator bor va yo'q — o'lchadik

Chrome'da 360 piksellik telefonni emulyatsiya qilib (ya'ni kompyuterda telefon ekraniga taqlid qilib) o'lchadik:

Qatorsiz brauzer sahifani 980 piksellik "xayoliy kompyuter"da chizadi va 360 ga sig'dirish uchun uni 0.367 marta kichraytiradi (360 ÷ 980). 16 piksellik matn ko'zga 6 pikselga yaqin bo'lib qoladi.

CSS uchun esa bundan ham yomonrog'i bor. Telefon endi o'zini 980 piksellik kompyuter deb biladi. Keyingi darsda yoziladigan "ekran 640 pikseldan keng bo'lsa — ikki ustun" degan shart telefonda ham bajariladi. Siz qanchalik chiroyli mobil CSS yozmang, u ishga tushmaydi.

Diqqat: Responsive CSS "ishlamayapti" desa — birinchi navbatda viewport qatorini tekshiring. Bu eng ko'p unutiladigan qadam.

3.3 Natija bloklari va 360/768/1280 tugmalari

Darsdagi natija bloklarida viewport qatori allaqachon bor: sayt har blokni shu qator bilan o'raydi. ekranlar tugmalari esa natija oynasining enini 360, 768 va 1280 piksel qiladi. Oyna ichidagi sahifa uchun bu haqiqiy ekran eni kabi: vw, % va media query'lar shu enga qaraydi.

Lekin bu telefonning o'zi emas, faqat enning taqlidi. Haqiqiy telefonda yana uch narsa bor: zich ekran (bitta CSS pikselda 2–3 nuqta), barmoq bilan bosish va yashirinib-chiqadigan manzil paneli (Viewport birliklari darsidagi svh muammosi). Tugmalar enni tekshirish uchun yetarli, qolganini haqiqiy telefonda ko'rasiz.

Tekshirib ko'ring: Telefon eni 390 CSS piksel. Sahifada viewport qatori yo'q. width: 50vw blok necha piksel bo'ladi va nega ekranda u yarimdan kichikroq emas, aynan yarim bo'lib ko'rinadi?

4. Ikki viewport: layout va visual

4.1 Zoom'ning ikki turi

Telefonda ikki barmoq bilan kattalashtirishni pinch zoom deyishadi. Kompyuterda Ctrl va + bilan kattalashtirish — brauzer zoom'i. Ikkalasi ham "kattalashtirish", lekin CSS uchun butunlay boshqa narsalar.

Buni tushunish uchun brauzerda ikkita viewport borligini bilish kerak:

• Layout viewport — sahifa chiziladigan maydon. CSS shunga qaraydi: %, vw, media query'lar. Viewport qatori aynan shuni sozlaydi.
• Visual viewport — hozir ko'zingiz ko'rib turgan qism. Pinch zoom qilsangiz, u kichrayadi: siz sahifaning bir bo'lagiga "lupa" bilan qaraysiz.

Xaritani eslang. Layout viewport — butun xarita varag'i. Visual viewport — lupa ostidagi doira. Lupani yaqinlashtirsangiz, doirada kamroq joy ko'rinadi, lekin varaqning o'zi o'zgarmaydi.

4.2 O'lchadik

360 piksellik telefon emulyatsiyasida pinch zoom'ni ikki barobar qildik. Chrome'da visualViewport.width visual viewport enini beradi:

Nimaga qarang: pinch zoom layout'ga tegmadi. Sahifa qayta chizilmadi, media query'lar o'zgarmadi — faqat "lupa" yaqinlashdi.

Kompyuterdagi brauzer zoom'i esa boshqacha. Windows 11'dagi Chrome'da oynani o'zgartirmasdan zoom'ni 100% dan 200% ga o'tkazdik: clientWidth 1283 dan 641 ga tushdi. Brauzer zoom'i layout viewport'ni o'zgartiradi — sahifa go'yo ikki barobar tor ekranda qayta chiziladi.

flowchart TD
  Z{"Qaysi zoom?"}
  Z -->|Telefonda ikki barmoq| P["Pinch zoom"]
  Z -->|Ctrl va +| B["Brauzer zoom'i"]
  P --> V["Faqat visual viewport<br/>kichrayadi"]
  V --> V2["CSS o'zgarmaydi"]
  B --> L["Layout viewport<br/>torayadi"]
  L --> L2["%, vw, media query<br/>qayta hisoblanadi"]

Nimaga qarang: ikki zoom ikki xil yo'ldan boradi. CSS faqat brauzer zoom'i tarmog'ini sezadi.

4.3 Bu nega muhim: zoom — ham responsive

Brauzer zoom'i ekranni "toraytiradi". Demak 1280 piksellik noutbukda 200% zoom qilgan foydalanuvchi sahifani 640 piksellik ekrandagidek ko'radi. 400% da — 320 piksellik.

Shuning uchun responsive dizayn faqat telefonlar uchun emas. Ko'zi zaif foydalanuvchi kompyuterda zoom qilganda sahifa telefon ko'rinishiga o'tadi — va u yerda ham qulay bo'lishi kerak.

WCAG'da buning uchun alohida mezon bor — 1.4.10 Reflow ("qayta oqish"). Talab: 320 CSS piksel enda kontent ikki tomonga aylantirmasdan o'qilsin. Ya'ni faqat tik aylantirish bo'lsin, gorizontal skroll bo'lmasin. 320 — aynan 1280 ning 400% zoom'dagi eni. Keng jadval, xarita kabi ikki o'lchamli kontent istisno.

4.4 Zoom'ni o'chirmang — CSS nuqtai nazaridan

head anatomiyasi darsida maximum-scale=1 va user-scalable=no pinch zoom'ni taqiqlashini ko'rdik. Endi sababini aniqroq bilasiz: ular visual viewport ni qulflaydi. Layout'ga ta'sir qilmaydi, faqat foydalanuvchidan lupani tortib oladi. Sahifangiz yaxshi responsive bo'lsa ham, mayda narxni kattalashtirib o'qiy olmaydigan odamga bu yordam bermaydi.

Zoom'ni o'chirishning odatiy sababi — iPhone'da mayda shriftli maydon bosilganda sahifaning avtomatik kattalashishi. Uning CSS yechimini Mobil qurilma tuzoqlari darsida ko'ramiz.

Tekshirib ko'ring: Foydalanuvchi 1200 piksellik oynada Chrome zoom'ini 150% qildi. CSS uchun ekran eni qancha? Telefonda pinch zoom'ni 150% qilsa-chi (telefon eni 390)?

5. Birinchi tarkib: egiluvchan to'r

5.1 Qotgan maket

Dizayner «Bahor» uchun 960 piksellik maket chizdi: chapda menyu (640 piksel), o'ngda aksiya paneli (300 piksel), orasida 20 piksel. Stajyor maketni pikselma-piksel ko'chirdi:

<style>
  body {
    margin: 0;
    font-family: system-ui, sans-serif;
    background-color: #fffaf0;
  }
  div {
    display: flex;
    gap: 20px;
    width: 960px;
  }
  main {
    width: 640px;
    background-color: #e8f1ec;
  }
  aside {
    width: 300px;
    background-color: #b4461a;
    color: #fffaf0;
  }
</style>
<div>
  <main>
    <h1>Menyu</h1>
    <p>Osh — 35 000 so'm</p>
  </main>
  <aside>
    <p>Bugun ko'k choy — 5 000 so'm!</p>
  </aside>
</div>

Uchala tugmani bosing. Nimaga qarang: telefonda va planshetda aksiya paneli ekrandan chiqib ketdi — sahifa o'ngga suriladi. Chrome'da o'lchadik: 360 piksellik oynada sahifaning to'liq eni 960 piksel. Kompyuterda esa o'ngda 320 piksellik bo'sh joy qoldi. Maket faqat bitta — 960 piksellik — ekran uchun to'g'ri.

5.2 Maqsad ÷ kontekst = natija

Marcotte qotgan maketni foizga o'girishning oddiy formulasini berdi:

natija = maqsad ÷ kontekst

Maqsad — elementning maketdagi eni. Kontekst — uning otasining eni. Natija — foiz:

Uchalasining yig'indisi — 100%. Endi div ga en berish shart emas: blok o'zi otaning butun enini oladi.

<style>
  body {
    margin: 0;
    font-family: system-ui, sans-serif;
    background-color: #fffaf0;
  }
  div {
    display: flex;
    gap: 2.083%;
  }
  main {
    width: 66.667%;
    background-color: #e8f1ec;
  }
  aside {
    width: 31.25%;
    background-color: #b4461a;
    color: #fffaf0;
  }
</style>
<div>
  <main>
    <h1>Menyu</h1>
    <p>Osh — 35 000 so'm</p>
  </main>
  <aside>
    <p>Bugun ko'k choy — 5 000 so'm!</p>
  </aside>
</div>

Nimaga qarang: gorizontal skroll yo'q, nisbat har ekranda bir xil. O'lchadik: 768 pikselda menyu 512, panel 240 piksel; 1280 pikselda — 853 va 400.

Lekin telefonga qarang: panel atigi 112.5 piksel. Aksiya matni tor ustunga siqilib, uch qatorga bo'lindi. To'r egiluvchan, lekin hamma ekranda bir xil tuzilishda. Telefonda ikki ustun umuman kerak emas — panel menyuning ostiga tushishi kerak. Buni foiz qila olmaydi. Buning uchun shart kerak: "ekran tor bo'lsa — bitta ustun". Bu — uchinchi tarkib, Media queries.

5.3 Bugun foiz o'rniga

Marcotte davrida flex va grid yo'q edi — foizni qo'lda hisoblashardi. Bugun bu hisobni brauzer qiladi:

div {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.25rem;
}

2fr 1fr — "bo'sh joyni 2 ga 1 nisbatda bo'l" (Grid'ga kirish). Oraliq rem da qotib turadi, ustunlar esa qolgan joydan ulush oladi — formula kerak emas. Flex'dagi flex-grow ham xuddi shu ishni qiladi (flex algoritmi).

Formula baribir foydali: dizayner piksellik maket bersa, uni to'rga o'girishda fr nisbatini tanlashga yordam beradi. 640 va 300 — taxminan 2 ga 1.

Egiluvchan to'rning yana bir quroli — Matematik funksiyalar darsidagi konteyner: width: min(100% - 2rem, 70rem). Telefonda ekran bo'ylab, katta ekranda o'rtada to'xtaydi.

Tekshirib ko'ring: Maket eni 1200 piksel. Kontent ustuni 780, yon panel 360, oraliq 60 piksel. Foizlarni hisoblang.

6. Ikkinchi tarkib: egiluvchan media

Matn tor ustunga o'zi o'raladi. Rasm esa o'ralmaydi: width="600" atributli rasm 328 piksellik ustunda ham 600 piksel bo'lib qoladi va sahifani o'ngga suradi.

Rasm va media darsida buning yechimini yozgan edik:

<style>
  body {
    margin: 0;
    font-family: system-ui, sans-serif;
    background-color: #fffaf0;
  }
  main {
    width: min(100% - 2rem, 40rem);
    margin-inline: auto;
  }
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
</style>
<main>
  <h1>Choyxona «Bahor»</h1>
  <img alt="Dasturxon ustida osh va choynak" width="600" height="300"
    src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
    width='600' height='300'><rect width='600' height='300'
    fill='%232f6b3a'/><circle cx='220' cy='160' r='90'
    fill='%23e9c46a'/><circle cx='420' cy='150' r='50'
    fill='%23fffaf0'/></svg>">
  <p>Rustam aka oshni har kuni ertalab damlaydi.</p>
</main>

Nimaga qarang: telefonda rasm 328 × 164 piksel — ustunga sig'di va nisbati saqlandi. Planshet va kompyuterda u o'zining 600 × 300 pikselida qoldi: max-width rasmni kichraytiradi, lekin hech qachon kattalashtirmaydi. "Tahrirlab ko'rish" bilan max-width qatorini o'chiring va telefon tugmasini bosing — rasm ustundan chiqib ketadi.

Rasmning o'zi ham ekranga mos bo'lishi mumkin: telefonga kichik fayl, kompyuterga katta fayl. Buni HTML'da srcset bilan qilgan edingiz (Responsive rasmlar I), CSS tomonini esa Rasmlar CSS tomoni darsida ko'ramiz.

7. DevTools qurilma rejimi

7.1 Yoqish va asosiy imkoniyatlar

Sahifani har enda tekshirishning tez yo'li — Chrome DevTools'ning qurilma rejimi (device mode). F12, keyin Ctrl + Shift + M (Chrome DevTools I). Firefox'da xuddi shu tugmalar "Responsive Design Mode" ni ochadi.

Tepadagi panelda:

• Qurilma ro'yxati — tayyor telefon va planshetlar. Birinchi band — Responsive: en va bo'yni o'zingiz yozasiz yoki chetini sichqoncha bilan tortasiz.
• En va bo'y maydonlari — 360, 768, 1280 kabi aniq sonlar.
• DPR (device pixel ratio — piksel zichligi) — bitta CSS pikselda nechta ekran nuqtasi borligi.
• Aylantirish tugmasi — tik va yotiq holat.
• Uch nuqta menyusi → "Show media queries" — sahifadagi media query chegaralarini rangli chiziq qilib ko'rsatadi. Keyingi darsda juda asqotadi.

7.2 Qanday tekshirish kerak

Faqat uch tugmani bosish yetmaydi. Responsive rejimda sahifa chetini sekin 1280 dan 320 gacha torting va sahifani kuzating. Qaysidir enda narsa buziladi: sarlavha sig'may qoladi, tugma tugmaga yopishadi, gorizontal skroll chiqadi. O'sha enni yozib qo'ying — keyingi darsda aynan shu yerga shart qo'yamiz.

WCAG 1.4.10 tekshiruvi uchun ikki yo'l bor. Birinchisi — Responsive rejimda enni 320 qilish. Ikkinchisi — oddiy oynada zoom'ni 400% qilish. Ikkalasida ham gorizontal skroll bo'lmasligi kerak.

7.3 Cheklovlar

Qurilma rejimi — taqlid:

• Manzil paneli yo'q, shuning uchun svh va dvh farqi ko'rinmaydi (Viewport birliklari).
• Sichqoncha — barmoq emas: kichik tugmani bosish qiyinligini sezmaysiz.
• Telefonning haqiqiy protsessori va interneti boshqa (tezlikni sekinlatish sozlamasi faqat taxmin).

Shuning uchun yakuniy tekshiruv — haqiqiy telefon. Sahifani internetga joylab (Birinchi deploy) yoki kompyuter bilan bir Wi-Fi tarmog'idagi telefonda oching.

Tekshirib ko'ring: Qurilma rejimida sahifa 360 va 1280 pikselda chiroyli. Yana nimani tekshirish kerak?

8. Ko'p uchraydigan xatolar

8.1 Viewport qatori yo'q yoki xato yozilgan

Telefonda hamma narsa mayda, media query'lar ishlamaydi. Xato yozilishi ham shunday natija beradi: width=device-width; initial-scale=1 — nuqtali vergul bilan (head anatomiyasi). Tuzatish: har sahifada, charset dan keyin, vergul bilan.

8.2 Zoom taqiqlangan

user-scalable=no yoki maximum-scale=1. Lighthouse buni xato deb belgilaydi. Tuzatish: ikkalasini o'chiring.

8.3 Qotgan px en

width: 960px, width: 1200px — kichik ekranda gorizontal skroll. Tuzatish: max-width yoki min(100% - 2rem, 60rem); ustunlar uchun fr yoki foiz.

8.4 100vw bilan to'liq en

Windows'da skrollbar sabab gorizontal skroll (Viewport birliklari). Tuzatish: width ni yozmang yoki 100%.

8.5 Faqat ikkita en tekshirilgan

"Telefonda ham, kompyuterda ham yaxshi" — 600 pikselda esa buzilgan. Tuzatish: chetini tortib, hamma enni ko'ring.

9. Mashqlar

1-mashq (oson): Foizga o'giring

Maket 1000 piksel. Taom kartalari ustuni 700, "Bugun" paneli 270, oraliq 30 piksel. Foizlarni yozing: ustun — [:70]%, panel — [:27]%, oraliq — %.

Ishora: "maqsad ÷ kontekst", kontekst — 1000.

2-mashq (o'rta): Stajyorning head i va body si

Stajyor bron sahifasini shunday boshladi. Telefonda mehmonlar "yozuv mayda, kattalashtirib ham bo'lmaydi" deyishdi:

<meta name="viewport"
      content="width=1024, maximum-scale=1, user-scalable=no">

body {
  width: 1024px;
}

Uchta muammoni toping va tuzating.

<meta name="viewport" content="width=device-width, initial-scale=1">

3-mashq (qiyin): Qaysi viewport?

Har holat uchun ayting: clientWidth (layout) va visualViewport.width (visual) qancha bo'ladi? Media query'lar qaysi enni ko'radi?

1. 390 piksellik telefon, viewport qatori bor, pinch zoom yo'q.
2. Xuddi shu telefon, pinch zoom × 3.
3. Xuddi shu telefon, viewport qatori yo'q.
4. 1440 piksellik kompyuter oynasi, Chrome zoom 200%.

Ishora: pinch zoom faqat visual viewport'ni, brauzer zoom'i esa layout viewport'ni o'zgartiradi («Ikki viewport» bo'limidagi o'lchov va diagramma).

4-mashq: Portfolio qadami — responsive audit

Portfoliongizni birinchi marta "responsive ko'z" bilan tekshiramiz. Bu darsda kod kam — asosiy ish o'lchash.

1. Oltita sahifaning hammasida (404.html ham) viewport qatori to'g'ri yozilganini tekshiring.
2. asosiy.css da Ctrl + F bilan px ni qidiring. width, min-width yoki height da qotgan piksel bo'lsa, yozib qo'ying.
3. DevTools Responsive rejimida har sahifani 320 pikselda oching. Gorizontal skroll bormi? Bo'lsa — qaysi element aybdor?
4. Chetini 1280 dan 320 gacha sekin torting. Menyu, sarlavha va loyiha kartalari qaysi enda noqulay bo'la boshlaydi? Sonlarni yozing — ular keyingi darslarda kerak.
5. Oddiy oynada zoom'ni 400% qiling va bosh sahifani o'qing.

Ishora: aybdor elementni topishning tez yo'li — Elements panelida elementlarni birma-bir tanlab, qaysi biri ekran chetidan o'ngga chiqib turganini ko'rish (Overflow darsidagi portfolio qadami).

10. Real ishda

• Google saytlarni asosan telefon versiyasi bo'yicha baholaydi va indekslaydi (mobile-first indexing). Telefonda buzilgan sayt qidiruvda ham yutqazadi.
• Lighthouse viewport qatori yo'qligini va zoom taqiqini alohida tekshiradi (Lighthouse).
• Maketlar odatda ikki-uch enda chiziladi (masalan 360 va 1440). Oradagi enlarni dasturchi o'zi to'g'ri qilishi kerak — bu responsive dizayn ishining katta qismi.
• Intervyuda so'raladi: "Responsive dizayn nimalarga tayanadi?", "Viewport meta teg nima qiladi?", "Layout va visual viewport farqi?". Bu darsdan keyin uchalasiga javob bera olasiz.

Xulosa

• Responsive dizayn — bitta HTML, ekran eniga moslashadigan joylashuv. Uch tarkib: egiluvchan to'r, egiluvchan media, media query.
• Viewport qatorisiz telefon o'zini 980 piksellik kompyuter deb biladi — CSS ham, media query ham shu 980 ga qaraydi.
• Pinch zoom faqat visual viewport'ni o'zgartiradi, brauzer zoom'i esa layout viewport'ni toraytiradi va responsive CSS'ni ishga tushiradi.
• WCAG 1.4.10: 320 CSS piksel enda gorizontal skroll bo'lmasin.
• "Maqsad ÷ kontekst" — qotgan maketni foizga o'giradi; bugun fr va min() bu ishni osonlashtiradi.
• Qurilma rejimida chetini sekin torting; yakuniy tekshiruv — haqiqiy telefon.

Keyingi dars: Media queries — @media bilan "ekran shundan keng bo'lsa" degan shart yozamiz va «Bahor» aksiya panelini telefonda menyu ostiga tushiramiz.

Manbalar

• Ethan Marcotte, "Responsive Web Design" — A List Apart, 2010 (alistapart.com)
• MDN: "Viewport concepts", "Viewport meta tag", "Responsive web design" — developer.mozilla.org
• W3C: WCAG 2.2, 1.4.10 "Reflow" va 1.4.4 "Resize Text" — w3.org/WAI/WCAG22/Understanding
• Chrome for Developers: "Simulate mobile devices with device mode" — developer.chrome.com/docs/devtools