Akıllı Telefon Desteği

DLE, ziyaretçinin cihazını sunucu tarafında tespit eder ve şablonlarda cihaza göre farklı HTML üretmenizi sağlar. Tarayıcıda çalışan bir tespit kodu yoktur.

Tespit nasıl yapılır?

Şablon sınıfı oluşturulurken bir kez cihaz tespiti yapılır ve sonuç özelliklere yazılır:

Bayrak	Anlamı
`smartphone`	Akıllı telefon
`tablet`	Tablet
`tv`	TV / akıllı TV / TV kutusu
`desktop`	Masaüstü bilgisayar
`android`	Android işletim sistemi
`ios`	iOS / iPadOS

Tespit, engine/classes/mobiledetect/MobileDetect.php kütüphanesiyle ve User-Agent bilgisine bakılarak yapılır (proxy arkasındaki bazı sunucular için CloudFront başlıkları da dikkate alınır). Sonuç, sayfa boyunca tekrar tekrar hesaplanmaz — bir kez hesaplanıp saklanır.

!

Cihaz bayrakları bağımsızdır Bir iPhone'da hem smartphone hem ios aynı anda geçerlidir. Akıllı TV'de tv geçerliyken desktop geçersiz olur, ama smartphone yine kendi başına değerlendirilir. Yani "bir cihaz yalnızca bir kategoriye girer" diye bir kural yoktur ve öncelik sırası da yoktur.

Şablonda kullanım

[smartphone]
    <a href="{full-link}">{title limit="40"}</a>
[/smartphone]

[not-smartphone]
    <img src="{image-1}" alt="{title}">
[/not-smartphone]

[tablet] … [/tablet]
[tv] … [/tv]
[desktop] … [/desktop]
[android] … [/android]
[ios] … [/ios]

Her birinin [not-…] biçimi de vardır. Bu bloklar global etiketler olduğu için her şablonda kullanılabilir ve iç içe yerleştirilebilir.

Mobil için ne yapmalı?

DLE 21.0'te iki yaklaşım vardır:

Yaklaşım	Nasıl?	Değerlendirme
Duyarlı (responsive) tema	Aynı tema; CSS ile ekran genişliğine uyum. Cihaz etiketleriyle yalnızca detay farkları verilir.	Önerilen Tek tema bakımı, daha az hata, daha iyi önbellek.
Ayrı mobil tema	`templates/smartphone` adlı özel klasör	Sınırlı Klasör adı sistem tarafından ayrılmıştır ve tema listelerinde gösterilmez.

i

templates/smartphone nedir? DLE, smartphone adlı tema klasörünü özel sayar: normal tema listelerinde (panel seçimi, tema değiştirme listesi) görünmez, çünkü DLE onu mobil cihazlar için ayrılmış kabul eder. Ayrı bir mobil tema tasarlayacaksanız adını tam olarak smartphone koymalısınız.

Ayrıca $config['mobile_skin'] diye bir ayar yoktur — mobil tema, cihaz tespitine dayalı CSS/şablon mantığıyla yönetilir.

Ziyaretçinin tema değiştirmesi

Ziyaretçiye tema seçeneği sunmak isterseniz {changeskin} etiketini kullanın. DLE bu etiketin yerine bir form basar:

[changeskin]
    {changeskin}
[/changeskin]

Ziyaretçi seçim yaptığında DLE:

Tema adını süzer Seçilen ad yalnızca harf/rakam/tire içerecek biçimde temizlenir.
Klasörün var olduğunu doğrular Ad templates/ altında gerçekten varsa kabul edilir.
Çerez yazar Tercih dle_skin çerezine 365 gün için kaydedilir.

!

Kategoriye atanmış tema her şeyi ezer Bir kategoriye tema atanmışsa, o kategoride ziyaretçinin dle_skin çerezi yok sayılır. Statik sayfalarda tanımlı tema klasörü de aynı şekilde önceliklidir. Ziyaretçi "temam değişmiyor" diyorsa sebebi genellikle budur.

Editörün mobil uyarlaması

Cihaz tespiti yalnızca şablonlarda değil, düzenleyicide de kullanılır. Telefon veya tabletten yorum düzenlenirken DLE daha sade bir editör arayüzü (mobil araç çubuğu) devreye alır. Bu davranışı sizin ayrıca ayarlamanız gerekmez.

İpuçları ve tuzaklar

Duyarlı CSS'i tercih edin. Cihaz etiketleriyle tüm sayfayı ikiye ayırmak, iki farklı siteyi bakmak zorunda kalmak demektir.
Görselleri mobilde küçültün. [not-smartphone] ile tam boy görsel, [smartphone] ile küçük görsel vermek en yaygın ve etkili kullanımdır.
Yalnızca [desktop] ile masaüstü demeyin. Mobil ve tablet dışındaki her şey (botlar dahil) masaüstü sayılır; botlar için ayrı davranış istiyorsanız bunu unutmayın.
Önbelleği düşünün. Cihaza göre farklı HTML üretiyorsanız, sayfa önbelleğinin aynı içeriği tüm cihazlara servis etmediğinden emin olun.
Sunucu tarafı tespit User-Agent'a bağlıdır. Kullanıcı ajanını değiştiren araçlar yanlış sonuç verebilir; test ederken gerçek cihaz kullanın.

Kontrol listesi

Tema duyarlı (responsive) olarak tasarlandı.
Cihaz etiketleri yalnızca detay farkları için kullanıldı.
Mobilde ölçeklenmeyen geniş görseller/kod blokları yok.
Tema değiştirme formu ({changeskin}) gerekiyorsa eklendi.
Ayrı mobil tema kullanılacaksa klasör adı tam olarak smartphone.
Gerçek telefon ve tablette test edildi.

Sırada: Hata Bildirim Sistemi.