Settings

Görüntüleme Cihazları (Display Devices)

Görüntüleme Cihazları bölümü, farklı hedef cihazlar için önceden tanımlı ekran boyutları oluşturmanı sağlar.
Bu sayede aynı sayfa için cihaza özel düzenler oluşturabilir, sayfayı çoğaltmaya gerek kalmaz.


Amaç ve Faydası

Yeni bir sayfa oluşturduğunda örneğin [code_block_0] gibi bir sabit düzen tanımlayabilirsin.
Peki o zaman neden ayrıca "Display Devices" ayarına ihtiyaç var?

→ Çünkü bu özellik, aynı sayfanın kullanılan cihaza göre farklı görünmesini sağlar.

Display Device kullanarak şunları yapabilirsin:

  • Masaüstü için tüm kontrolleri detaylı göstermek
  • Telefon için aynı sayfayı sadeleştirilmiş bir düzenle sunmak

Sayfa değişmez – sadece düzen, yapı ve görünürlük, seçilen cihaza göre değişir.


Uygulama Örneği

  1. [code_block_0] boyutlarında masaüstü için bir sayfa oluştur
  2. [code_block_2] adlı bir Display Device oluştur
  3. Sayfa editöründe sol üstteki cihaz ikonuna tıkla
  4. "iPhone 15 Pro"yu seç ve sayfa düzenini şu şekilde değiştir:
    • Gereksiz kontrolleri kaldır
    • Daha büyük butonlar kullan
    • İçeriği yeniden sırala
    • Dokunmatik dostu yapı kur

Sonuç:
Tek sayfa – her cihaz için farklı görünüm.
Aynı sayfa, farklı cihazda farklı yapı.


Yeni Cihaz Ekleme

  1. +Yeni butonuna tıkla
  2. Aşağıdaki bilgileri gir:
    • İsim (örneğin "iPhone 15 Pro", "WP400 7inch")
    • Genişlik (CSS piksel olarak, örn. [code_block_3])
    • Yükseklik (CSS piksel olarak, örn. [code_block_4])
    • Opsiyonel: Min-Width / Max-Width

Örnek değerler:

  • iPhone 15 Pro: [code_block_5]
  • WP400 (7", fiziksel 1024×600): önerilen [code_block_6] CSS px

Editörde Kullanımı

  1. Herhangi bir sayfayı aç
  2. Sol üstteki cihaz ikonuna tıkla
  3. Tanımladığın cihazlardan birini seç
  4. Düzeni ve kontrolleri bu cihaza özel şekilde düzenle

Bu değişiklikler yalnızca seçilen Display Device için geçerlidir – diğer cihazlar etkilenmez.


Notlar

  • PLCVisu’da duyarlı (responsive) tasarım için vazgeçilmez
  • Özellikle önemli olduğu durumlar:
    • Statik düzenler
    • Cihaza özel varyantlarla birlikte kullanılan esnek düzenler
    • Cihaza özel mantık ve görünüm
  • Her cihaz için ayrı sayfa oluşturma ihtiyacını ortadan kaldırır