Kriptovalyutalar
Torrent Gear
Casinolar müxtəlif ekran diaqonallarına necə uyğunlaşır
1) Niyə adaptasiya vacibdir
Oyunçular müxtəlif cihazlarla gəlir: 4. 7 ″ smartfonlar, 6. 7 ″ fabletlər, planşetlər 8-13 ″, qatlanan (foldables), masa üstü və TV. Adaptasiya olmadan oxuma qabiliyyətini, sürətini və çevirməsini itirirsiniz: kassa pozulur, yuvalar «kəsilir», düymələr «baş barmaq zonasına» düşmür və canlı masalarda bahislər üçün yer yoxdur.
2) Mesh, breakpoint və ölçmək
Tövsiyə olunan fasilə nöqtələri:- XS: ≤ 360px - kompakt smartfonlar
- SM: 361-480px - ən çox smartfon
- MD: 481-768px - böyük smartfonlar/kiçik planşetlər (portret)
- LG: 769-1024px - tabletlər/kiçik noutbuklar
- XL: 1025-1440px - masaüstü
- 2XL:> 1440px - geniş monitorlar/TV
- Smartfonlar: 4-6 sütun, 8px addım.
- Planşetlər: 8-12 sütun, 8-12px addım.
- Masaüstü: 12-24 sütun, 12-16px addım.
- Genişlik və çap üçün fluid layout (clamp ()) istifadə edin: 'font-size: clamp (14px, 1. 6vw, 18px)`.
- XS/SM: 2 sütun (kart ≥ 156-180px).
- MD: 3-4 sütun.
- LG/XL: Provayderlər/janrlar üzrə «sıralar» ilə 5-8 sütun.
- 16:9 və ya 1:1 (slots üçün) örtük əmsalını saxlayın, preview «kroninq» qarşısını alın.
3) «Baş barmaq zonaları» və tıklama
Əsas CTA (Depozit, Play, Davam) - smartfonlar sağ alt (sağ) və ya mərkəz alt.
44 × 44pt iOS/48 × 48dp Android.
Hədəflər arasında - ən azı 8px.
Kritik hərəkətlər (çıxış/bahis təsdiqi) - dar ekranlarda iki addım.
4) Portret vs landşaft
Portret (mobil üçün default):- 16:9 «çərçivə» slots, aşağı bahis paneli, nominal/xətləri dəyişdirmək üçün swipes.
- Lobbi «kart divarı» + aşağı naviqasiya (5 bal maksimum).
- oyun kətan artırmaq; canlı oyunlarda tarix və söhbət üçün yan panellər.
- Kassada - iki sütunlu forma: solda metodlar/məbləğlər, sağda təsdiq.
- UX üçün - ayrı-ayrı rejimlərdə (canlı masalar, videolar) lock-oriyentasiya edin.
5) Qatlanan cihazlar və planşetlər
Foldables (çarpayı/kitab):- window segmentlərindən istifadə edin: «daxili» ekranda iki panel göstərin (oyun + lobbi/söhbətlər/missiyalar).
- hinge-gutter (loop) izləyin: altında düymələri qoymaq olmaz.
- Sol daimi saidbar (naviqasiya/filtrlər), sağ - məzmun.
- Canlı oyunlarda - «üç panel»: video, mərc, statistika.
6) Təhlükəsiz sahələr, kəsiklər və sistem panelləri
safe-area insets (iOS) və 'env (safe-area-inset-)' kəsik/dairəvi bucaqlar altında girintilər üçün istifadə edin.
Android-də gesture navigation (alt swipi) nəzərə alın: CTA-nı kənarda gizlətməyin.
WebView/PVA-da 'viewport-fit = cover' sualını verin.
7) Oyun miqyası: slots, canlı, mini oyunlar
Slots (canvas/WebGL/iframe):- aspect-ratio (məsələn, 16/9) və 'object-fit: contain' konteyneri.
- DPI adaptasiyası: devicePixelRatio 1-2-də render (keyfiyyət və batareya balansı).
- UI qatları - «şəkil pikselləri» deyil, rem/məntiq vahidləri.
- Video axını genişliyindən asılı olaraq 360p → 720p qədər uyğunlaşdırın.
- Bahis paneli - çevik: mobil kompakt çiplər/mesh, tam masa - planşet/masaüstü.
- Chat/Tarix - slayder və ya yan panel.
- One-hand rejimi dəstəyi, böyük düymələr, «kiçik zərbələr» imtina.
8) Müxtəlif diaqonallarda kassa və formalar
Smartfon: addım-addım usta (üsul → məbləğ → təsdiq).
Planşet/masaüstü: split-form (soldan metodlar, sağdan detallar).
Klaviatura: Diqqət edərkən məzmunu sıxın; klaviatura üzərində CTA qeyd.
Giriş maskaları və avtomatik doldurma, Apple Pay/Google Pay - sistem dialoqları.
9) Mətbəə və kontrast
Əsas ölçüsü: 16px (SM) → 18px (MD) → 20px (LG +), vasitəsilə 'clamp ()'.
Sətirlərarası ≥ 1. 4, video alt mətn üçün WCAG AA/AAA kontrast.
Balans başlıqları və rəqəmləri - sabit genişlik üçün tabular lining.
10) Performans və metrika (Core Web Vitals)
LCP: <2. Mobil 5 c (kritik örtüklərin/Arr Shell-in əvvəlcədən yüklənməsi).
CLS: <0. 1 (bannerlər/şəkillər üçün hündürlük ayırın).
INP/TBT: Bloklayan JS-ni minimuma endirin, provayderləri tənbəl şəkildə yükləyin.
Qrafiklər: WebP/AVIF, adaptiv 'srcset/sizes', PWA üçün caching və Service Worker.
11) Əlçatanlıq və beynəlmiləlləşmə
Mətn ölçüsü - miqyaslı (respect user font size).
Ekran oxucuları: bahis düymələri/kassa üçün aria etiketləri, modalkalarda fokus tələləri.
RTL dilləri - güzgü interfeysi, məzənnə/valyuta formatları.
Rəng kodlaşdırılması (qırmızı/yaşıl) - nişanlar/imzalarla təkrarlayın.
12) Diaqonallar üzrə naviqasiya nümunələri
Smartfon: bottom-nav ≤ 5 bal + «Profil/Balans» papaq.
Planşet: daimi sol nav-rail.
Masaüstü: yuxarı menyu + sol filtrlər.
Sürətli əməliyyatlar (Depozit, Favoritlər, Axtarış) - həmişə baş barmaqdan 60-100px arasında.
13) Anti-overlay, pop-up və «reklam»
Bir anda bir modal pəncərə, adaptiv hündürlük (90vh mobile).
Layout shift olmadan bonus banner: hündürlüyü qeyd edin, skeleton istifadə edin.
Sistem jestləri və brauzer düymələrini bağlamayın.
14) Piksel sıxlığı və nişanlar
İkon paketləri: 1x/2x/3x; SVG mümkün olan yerdə.
Nazik xətlər (hairline) - ≥ 1px məntiqi (DPR nəzərə).
Oyunların və provayderlərin ekran görüntüləri - sıxılma ilə retina keyfiyyəti.
15) PWA/Web konteynerləri və WebView
Manifest: 'display = standalone', 512 + nişanları, mövzu altında splash ekran.
'viewport-fit = cover', təhlükəsiz sahələr, offline shell.
WebView-da ixtiyari sxemləri/inyeksiyaları qadağan edin, yerli qabıqda SSL pinning-i daxil edin (istifadə edilərsə).
16) Məzmun blokları və ölçü tövsiyələri
Hiro banner:- SM: hündürlüyü 32-40vh, bir CTA.
- LG +: 30-35vh, iki CTA + 2 sütun promo mətn.
- Oyun siyahıları: ekranda 6-12 kart, 20-30 paginasiya ilə «sonsuz lent».
- Canlı widget: mobil faylda minimum 320 × 180, tabletdə 640 × 360.
17) Buraxılışdan əvvəl dizayn çek siyahısı
1. Test breakpoint XS → 2XL, portret/landşaft, split-screen.
2. «Baş barmaq zonası» daxilində CTA, hədəflər 44 ≥ 44pt ×.
3. Slots/live aspect-ratio ilə ölçülür, UI kəsilmədən.
4. Kassa bir səhifədə (mobil) və split rejimində (planşet/masaüstü) işləyir.
5. Qeydlər/kəsiklər və safe-area nəzərə alınır; 'viewport-fit = cover'.
6. Yaşıl zonada Core Web Vitals; banner/şriftlərdən kəskin CLS yoxdur.
7. WCAG kontrastları və ölçüləri; oxucular üçün əlçatanlıq.
8. Lokallar/RTL, valyutalar və uzun sətirlər şəbəkəni qırmır.
9. PWA: manifest, SW, oflayn fallback, retina nişanları.
10. foldables/planşetlərdə test: iki panel, hinge-gutter nəzərə alınır.
18) Tez-tez səhvlər və sürətli fikslər
Limitsiz «rezin» hündürlük → 'aspect-ratio' və konteynerlərdən istifadə edin.
CTA ən kənarda → 'safe-area' və daxili boşluqlar əlavə edin.
Kiçik bahis çipləri → 44-48dp qədər artırın, kontrastı artırın.
Jump Banners → hündürlüyünü ehtiyat edin, şriftləri əvvəlcədən yükləyin.
Yuvalarda FPS düşməsi → DPR renderini 1-ə endirin. 5-2, animasiyaları məhdudlaşdırın, WebGL optimizasiyası istifadə edin.
19) FAQ
Tabletlər üçün ayrıca modellər etmək lazımdırmı?
Bəli: planşetlərdə «boşluq» böyüyür; iki/üç panelli layautdan istifadə edin.
Niyə yalnız «responsive» deyil? Niyə breakpoint?
Fluid yanaşma yaxşıdır, lakin məzmun sınıqları (panellər, sütunların sayı, naviqasiya növü) açıq fasilələr tələb edir.
Mobil kassanı harada yerləşdirmək olar?
Ayrı fullscreen step flow, CTA aşağı, klaviatura üzərində fiksasiya.
Canlı video ilə necə davranmaq olar?
Dinamik enində keyfiyyəti dəyişdirin; 16:9 saxlamaq; chat və bahislər - istiqamətindən asılı olaraq yan/alt panellərdə.
Casino-nun müxtəlif diaqonallara uyğunlaşdırılması şəbəkələr, fasilə nöqtələri, təhlükəsiz zonalar və performans, üstəlik slotlar və canlı oyunlar üçün düşünülmüş oyun kətanı ilə sistemli bir işdir. Təsvir edilmiş nümunələrə (baş barmaq zonaları, aspect-ratio, planşetlərdə split panellər, PWA-ən yaxşı practices) və metriklərə nəzarət edərək, hər hansı bir ekranda sürətli, oxunan və konversiya məhsulu əldə edirsiniz - 4. 7 ″ smartfon qədər 27 ″ masaüstü və qatlanan cihazlar.