Cihaz sınıfları

Web uygulaması hangi tür ekranda çalıştığı sorusuna tek bir yanıt verir ve her yüzey bu yanıtı okur. webapp/js/device-class.js üç cihaz sınıfını ve aralarındaki eşikleri tanımlar. Bu sayfa kararı, her sınıfın neyi değiştirdiğini ve çalışırken bir sınıf değişikliğinin nasıl ele alındığını açıklar. Ana ekran ve dock ana ekran, dock ve başlatıcı sayfasındadır.

Kısaca¶

• Üç sınıf vardır: pc, tablet ve phone (webapp/js/device-class.js:22-26).
• pc, işaretçinin üzerine gelebildiği ve hassas olduğu anlamına gelir; pencere genişliği ne olursa olsun. Aksi hâlde en çok 640 px genişliğindeki bir pencere phone, daha geniş olan tablet olur (webapp/js/device-class.js:16-33).
• Dock yalnız pc sınıfında ve pencere en az 900 px genişken kurulur (webapp/js/device-class.js:17-19, webapp/js/device-class.js:35-36).
• Her sınıfın kendi ana ekran ızgarası ve kullanıcı hesabında kendi kayıtlı düzeni vardır (webapp/js/device-class.js:22-26).

Nasıl çalışır¶

Karar¶

Akış şeması sınıfın ve dock'un nasıl belirlendiğini gösterir.

flowchart TD
  start["deviceClass"] --> fine{"matchMedia hover hover ve pointer fine"}
  fine -->|"evet"| pc["pc: 8 x 5 tahta"]
  fine -->|"hayır"| width{"innerWidth en çok 640"}
  width -->|"evet"| phone["phone: 4 x 5 tahta"]
  width -->|"hayır"| tablet["tablet: 6 x 5 tahta"]
  pc --> wide{"innerWidth en az 900 ve çerçeve içinde değil"}
  wide -->|"evet"| dock["dock kurulur"]
  wide -->|"hayır"| float["yalnız yüzen tuş"]
  phone --> float
  tablet --> float

Sözle:

1. hasFinePointer() (hover: hover) and (pointer: fine) medya sorgusunu sınar (webapp/js/device-class.js:16, webapp/js/device-class.js:28).
2. Eşleşirse sınıf pc olur (webapp/js/device-class.js:31).
3. Aksi hâlde window.innerWidth en çok PHONE_MAX_WIDTH (640) ise sınıf phone, değilse tablet olur (webapp/js/device-class.js:20, webapp/js/device-class.js:32).
4. isPcPointer() PC_MIN_WIDTH (900) genişlik sınamasını ekler. Dock yalnız bu doğruysa ve sayfa çoğaltılmış bir kutu değilse kurulur (webapp/js/device-class.js:19, webapp/js/device-class.js:36, webapp/js/app-wheel.js:87-93).
5. Çoklu ekran (ana ekranı çoğaltan +) yalnız pc sınıfında vardır: tilesAllowed() sınıfı sınar, syncDupHome diğer sınıflarda ve her sınıf değişiminde düğmeyi gizler ve kutuları kapatır (webapp/js/tiles.js:60-64, webapp/js/tiles.js:130-137, webapp/js/tiles.js:148).

Her sınıfın belirledikleri¶

applyBoardProfile(cls) sütunları, satırları ve anahtarları ana ekrana kopyalar ve bunları CSS'e --board-cols, --board-rows ve data-board-class olarak yayımlar (webapp/js/home.js:65-79).

Sınıfın diğer etkileri:

• Yüzen tuş yalnız kullanıcı onu dock'a sabitlediğinde ve isPcPointer() doğruyken gizlenir. Telefonlarda, tabletlerde ve dar PC pencerelerinde her zaman kalır; böylece açık bir uygulamanın her zaman ana ekrana dönüş yolu olur (webapp/js/home.js:1040-1047).
• Sıkı satır yoğunluğu yalnız hassas işaretçili cihazlarda uygulanır (webapp/js/prefs.js:79-83).
• Dokunmatikte bir kutucuk sürüklenebilmeden önce 450 ms tutulmalıdır; daha önce hareket eden parmak kaydırır (webapp/js/home.js:77-82, webapp/js/touch-gate.js:1-22).

Çalışırken sınıf değişikliği¶

onDeviceClassChange(cb) resize olayını ve medya sorgusunu dinler, olayların durulması için 120 ms bekler ve yalnız sınıf gerçekten değiştiğinde geri çağırır (webapp/js/device-class.js:38-64). Ana ekran sonra yeni profili uygular, uzlaştırır, çizer ve yeni sınıfın düzenini sunucudan okur (webapp/js/home.js:4481-4492).

Bir sınıfın ilk kullanımı¶

Sunucu geçerli sınıf için bir düzen tutmuyorsa ve tarayıcıda önbelleğe alınmış bir düzen yoksa ana ekran PC düzeninden başlar, onu daha küçük tahtaya yeniden akıtır ve sınıfın kendi düzeni olarak kaydeder (webapp/js/home.js:4590-4612). PC düzeninin kendisi başka bir sınıf tarafından hiç değiştirilmez (webapp/js/device-class.js:6-14).

Neden böyle kurulu¶

• webapp/js/device-class.js:1-4 içindeki yorum, hiçbir yüzey bir diğeriyle çelişmesin diye soruyu tek bir modülün yanıtladığını belirtir.
• webapp/js/home.js:52-56 içindeki yorum, bir telefona sıkıştırılan sekiz sütunlu bir düzenin okunamaz olduğunu, bu yüzden her sınıfın kendi düzeninin olduğunu belirtir.
• webapp/js/home.js:1040-1043 içindeki yorum, açık bir uygulama ana ekrana dönüş yolu olmadan kalmasın diye tuşun dock dışında durduğunu belirtir.

Kurallar ve sınırlar¶

• Projenin yazılı mühendislik kuralları PC deneyiminin üzerine gelme, hassas işaretçi ve en az 900 px ile algılanan başlatıcı olduğunu ve mobil ile tablet tasarımının ayrıca tanımlandığını belirtir.

• Tarayıcı testleri: web-client/_e2e_mobile_home.mjs, web-client/_e2e_mobile_app.mjs, web-client/_e2e_touch_sweep.mjs, web-client/_e2e_app_wheel.mjs.

Diğer parçalarla etkileşim¶

• Kayıtlı düzenler arayüz durumu anahtarlarıdır; bkz. kullanıcı arayüz durumu.
• Uygulama paketlerindeki sürüklenebilir yüzeyler platform bağlamındaki dokunma kapısını kullanır; bkz. kapılı uygulama paketleri.

Sınırlar ve açık noktalar¶

• Sınıf pencerenin kendi genişliğini kullanır; bu yüzden dokunmatik bir ekranda 640 px'ten dar bölünmüş bir bölme bir phone bölmesidir. Dock bir bölmenin içinde hiç kurulmaz (webapp/js/app-wheel.js:93).
• Hiçbir sunucu ayarı veya kullanıcı tercihi sınıfı geçersiz kılmaz. webapp/js/ içinde boardClass değerine yazan başka yer araması yalnız applyBoardProfile buldu.

Tanıtılan terimler¶

İlgili sayfalar¶

• Web uygulaması platformu
• Ana ekran, dock ve başlatıcı
• Kullanıcı arayüz durumu
• Temalar, belirteçler ve erişilebilirlik

c0d3217 numaralı commit ile 2026-11-14 tarihinde doğrulandı.