Mobil kullanıcılar artık web trafiğinin büyük bir payını oluşturuyor, ancak pek çok site hâlâ JavaScript üzerinde mobil tespitini yanlış ele alıyor. Sonuç ise tanıdık, yavaş yüklenen sayfalar, kırık dokunmatik etkileşimler, gereksiz açılır pencereler veya telefonlar ve tabletlerde masaüstülerden farklı davranan özellikler oluyor. Geliştiriciler, serbest çalışanlar ve pratik, hızlı web deneyimleri oluşturmaya çalışan küçük işletme sahipleri için bu bir minor ayrıntı değildir. Kullanılabilirliği, dönüşümü ve müşteri güvenini doğrudan etkiler.
The tricky part is that mobile detection on JavaScript is not a single technique. It can mean checking screen size, reading the user agent, detecting touch capability, or observing feature support in the browser. Each method solves a different problem, and each has limitations. The best approach is usually not to ask, “Is this a mobile device?” but rather, “What capabilities does this device and browser actually have?”
JavaScript’te Mobil Tespiti Nedir?
Çözüme temel olarak, JavaScript’teki mobil tespiti bir ziyaretçinin muhtemelen mobil bir cihaz mı kullandığını belirleme sürecidir ve bazen hangi tür mobil ortamını kullandığını da gösterir. Bu bilgi, gezinmeyi uyarlamak, etkileşimleri optimize etmek, daha hafif varlıklar yüklemek, düzenleri ayarlamak veya dokunmatik odaklı kullanım durumları için davranışları ince ayarlamak için kullanılabilir.
Birçok kişi bunun, ekranın küçük olup olmadığını kontrol etmek kadar basit olduğunu varsayar. Uygulamada bu daha nüanslıdır. Masaüstünde küçük bir tarayıcı penceresi bir telefondan farklıdır. Büyük bir tabletin ekranı bazı dizüstü bilgisayarlarınkinden daha geniş olabilir. Katlanabilir bir cihaz, kullanıcı uygulamanızla etkileşime girdikçe şekil değiştirebilir. JavaScript bu durumları tespit etmeye yardımcı olabilir, ancak gerçekte hangi sinyali ölçtüğünüzü anladığınızda.
Eski mobil tespit yöntemi, tarayıcı tarafından gönderilen metin tanımlayıcı olan kullanıcı aracısı dizesine ağır biçimde dayanıyordu. Yıllar boyunca geliştiriciler bu dizeyi, cihazın iPhone, Android telefonu, iPad veya masaüstü tarayıcısı olup olmadığını tahmin etmek için çözdüler. Bu yöntem hâlâ var, ancak eskisi kadar güvenilir değildir. Tarayıcılar gizlilik ve uyumluluk nedenleriyle kullanıcı aracısı verilerini giderek azaltıyor veya standartlaştırıyor. MDN’de kullanıcı aracısı dizesi hakkında daha fazla bilgi için şu sayfaya bakın: kullanıcı aracısı dizesi.
Modern ön yüz geliştirme daha çok duyarlı tasarım ve özellik tespiti yönüne kayıyor. Cihaz kategorisi hakkında geniş varsayımlarda bulunmak yerine, geliştiriciler CSS medya sorguları ve JavaScript kontrollerini kullanarak görünüm alanı boyutuna, dokunmatik desteğine, yönelim, işaretçi türü, ağ koşulları veya tarayıcı özelliklerine yanıt verir. Bu, daha dayanıklı uygulamalar üretir ve uç durumlarda hataları azaltır.
Neden geliştiriciler hâlâ mobil tespitini kullanıyor
Responsive tasarım düzenin büyük kısmını halletse de, JavaScript ile mobil bağlamları tespit etmenin hâlâ pratik nedenleri vardır. Bir ticari web sitesi, daha küçük görünüm alanlarında karmaşık bir fiyat tablosunu basitleştirmek isteyebilir. Bir rezervasyon uygulaması hover odaklı etkileşimlerden dokunmatik kontrollere geçebilir. Bir gösterge paneli, kısıtlı mobil bağlantılar için temel olmayan betikleri geciktirebilir.
Ayrıca performans açısından bir bakış açısı da vardır. Bir kullanıcının muhtemelen mobil bir ortamda olduğunu biliyorsanız, yüksek çözünürlüklü medyayı tembel yüklemeyi, etkileşimleri sıkıştırmayı veya pahalı animasyonlardan kaçınmayı tercih edebilirsiniz. Bu, daha kötü bir deneyim sunmak anlamına gelmez; daha uygun bir deneyim sunmaktır.
Cihaz tespiti ile yetenek tespiti arasındaki fark
Bu ayrım önemlidir. Cihaz tespiti, cihazın ne olduğuna cevap vermeye çalışır. Yetenek tespiti ise tarayıcının ne yapabileceğine cevap vermeye çalışır. Amacınız kullanılabilirliği artırmaksa, yetenek tespiti genelde daha güvenlidir.
Örneğin, hover tabanlı araç ipuçlarını göstermek isteyip istemediğinizi bilmek için bir “mobil” kullanıcı aracısını kontrol etmek zayıf bir çözümdür. Daha iyi bir yaklaşım, cihazın ince bir işaretleyiciye sahip olup olmadığını veya hover desteğini destekleyip desteklemediğini sormaktır. Bu, bir yetenek sorusudur ve JavaScript bu sinyallerle, geniş bir mobil etiketinden daha etkili çalışabilir.
JavaScript’te Mobil Tespitinin Ana Özellikleri
Akıllı kararlar almak için ana tespit yöntemlerini ve bunların nelerde iyi olduğunu anlamalısınız. Tek bir yöntem mükemmel değildir; bu yüzden başarı, doğru iş için doğru aracı kullanmaktan gelir.
Kullanıcı aracısı tespiti
Kullanıcı aracısı tespiti hâlâ geniş ölçüde kullanılır çünkü basittir ve aşinadır. JavaScript’te geliştiriciler genellikle navigator.userAgent öğesini inceler ve Android, iPhone veya iPad gibi işaretleri ararlar.
function isMobileByUserAgent() {
return /Android|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i.test(
navigator.userAgent
);
}
console.log(isMobileByUserAgent());
Bu yaklaşım hızlı sezgisel kontroller için işe yarayabilir, özellikle eski kod tabanlarında veya analiz betiklerinde. Bilinen cihaz aileleri için kaba sınıflandırma gerektiğinde de yardımcıdır.
Dezavantajı güvenilirliktir. Kullanıcı aracısı dizeleri sahte olarak değiştirilip, değiştirilebilir veya tarayıcılar arasında normalize edilebilir. Bunlar gelecek için dayanıklı değildir ve yeni cihazlar göründüğünde sık sık bozulabilir. İş mantığınız buna çok bağlıysa, bakım zahmetli hale gelir.
Görüntüleme alanı ve ekran boyutu tespiti
Daha yaygın bir desen, görüntüleme alanı genişliğini tespit etmek ve buna göre davranışı uyarlamaktır. Bu, duyarlı web tasarımına yakından uyum sağlar ve çoğu zaman kullanıcıların ekranda gerçekten deneyimledikleriyle eşleşir.
function isSmallViewport() {
return window.innerWidth <= 768;
}
console.log(isSmallViewport());
Bu, düzen veya mevcut ekran alanı söz konusu olduğunda kullanışlıdır. Bir yan menü belirli bir genişliğin altına indiğinde kapanacaksa, görünüm alanı tespiti tamamen makul bir çözümdür.
Yine de bunun ne anlama geldiği konusunda net olmak önemlidir. Bu, kullanıcının telefonda olup olmadığını söylemez. Sadece mevcut görünüm alanının küçük olduğunu söyler. Yeniden boyutlandırılan bir masaüstü tarayıcısı aynı sonucu tetikleyebilir. Birçok arayüz kararı için bu yeterli olabilir; ancak cihaz sınıflandırması için bu yeterli değildir.
Dokunmatik yetenek tespiti
Bazı geliştiriciler dokunmatik desteğini mobil kullanım ile eşdeğer görse de, bu kısayol yanıltıcı olabilir. Birçok dizüstü bilgisayar dokunmayı destekler ve bazı mobil tarayıcılar beklenenden farklı davranabilir. Yine de, arayüzünüzün farklı jestler veya kontroller gerektirdiği durumlarda dokunmatik yetenek hâlâ değerlidir.
function supportsTouch() {
return (
'ontouchstart' in window ||
navigator.maxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0
);
}
console.log(supportsTouch());
Bu, belirli bir etkileşim sorusuna yanıt verirken en iyi şekilde çalışır. Daha büyük dokunmatik hedeflere, kaydırma hareketlerine veya dokunmaya göre ayarlanmış sürükleme davranışlarına ihtiyacınız varsa, bu kontrol yardımcı olabilir. Ziyaretçinin “mobil” olup olmadığını karar vermeye çalışıyorsanız, bu tek başına çok geniştir.
JavaScript’te medya sorguları
JavaScript ayrıca CSS medya sorgularında kullanılan aynı tür koşulları da okuyabilir. Bu, stil ile betik mantığını uyumlu hale getirmenin en temiz yollarından biridir.
const mobileQuery = window.matchMedia('<span class="not"> (max-width: 768px)');
function handleViewportChange(e) {
if (e.matches) {
console.log('"Muhtemelen mobil boyutlu görünüm'lük"');
} else {
console.log('"Daha büyük görünüm"');
}
}
handleViewportChange(mobileQuery);
mobileQuery.addEventListener('"change"', handleViewportChange);
Bu yaklaşım, kullanıcı arayüzünüz dinamik olarak değiştiğinde özellikle faydalıdır. Bir kullanıcı telefonu döndürebilir, bir tarayıcıyı yeniden boyutlandırabilir veya bölünmüş ekran modları arasında geçiş yapabilir. Medya sorgusuna dayalı tespit, betiklerinizin cihaz durumunun asla değişmediğini varsayması yerine gerçek zamanlı olarak yanıt vermesini sağlar.
İşaretçi ve hover tespiti
Daha modern ve sıklıkla göz ardı edilen bir strateji, giriş davranışını kontrol etmektir. Bu, birçok mobil özel UX sorunlarının aslında giriş sorunları olduğu için önemlidir.
const hasCoarsePointer = window.matchMedia('(pointer: coarse)').matches;
const supportsHover = window.matchMedia('(hover: hover)').matches;
console.log({ hasCoarsePointer, supportsHover });
Bir kaba işaretçi genelde parmakla yapılan etkileşimi gösterir, oysa hover desteği fare veya dokunmatik yüzey kullanımını sıklıkla ilişkilendirir. Bu, menilerin, ipuçlarının ve etkileşimli kontrollerin nasıl davranacağını belirlerken geniş bir mobil tespit yerine çoğu zaman daha kullanışlıdır.
Ortaya çıkan yaygın yaklaşımları karşılaştırma
En etkili mobil tespit stratejisi, sorduğunuz soruya bağlıdır. Aşağıdaki tablo, her yöntemin en iyi nerede oturduğunu gösterir.
| Yöntem | En İyi İçin | Güçlü Yönler | Sınırlar |
|---|---|---|---|
| Kullanıcı aracısı tespiti, Kaba cihaz sınıflandırması | Kaba cihaz sınıflandırması | Basit, tanıdık, uygulanması hızlı | Kırılgan, sahte olabilir, geleceğe dönük daha az dayanıklı |
| Görüntüleme alanı genişliği, Düzen ve duyarlı davranış | Düzen ve duyarlı davranış | Ekran alanıyla eşleşir, bakımı kolay | Gerçek cihaz türünü belirlemez |
| Dokunmatik tespiti, Dokunmatik özel etkileşimler | Dokunmatik özel etkileşimler | Jest ve dokunma ile ilgili mantık için iyi | Dokunmatik her zaman mobil anlamına gelmez |
| JavaScript üzerinden medya sorguları, Dinamik duyarlı davranış | Dinamik duyarlı davranış | CSS mantığıyla senkronize olur, değişikliklere tepki verir | Koşullara odaklıdır, cihaz kimliğine odaklanmaz |
| İşaretçi ve hover tespiti, Girişe özgü UX ayarlamaları | Girişe özgü UX ayarlamaları | Etkileşim tasarımı için mükemmel | Tam bir mobil sınıflandırma sistemi değildir |
Neden “mobil” çoğu durumda yanlış hedef oluyor
JavaScript mobil tespitindeki en büyük hatalardan biri, tüm telefonlar ve tabletleri tek bir kategori olarak ele almaktır. Hızlı bağlantıya sahip modern bir amiral telefon belirli görevlerde eski bir masaüstü bilgisayardan daha iyi performans gösterebilir. Klavyeli bir tableti ise telefondan daha çok dizüstü bilgisayara benzer şekilde kullanabilirsiniz. Katlanabilir bir cihaz ise dar ekrandan geniş ekrana anında geçiş yapabilir.
Bu nedenle, bağlam odaklı bir yaklaşım daha iyi sonuç verir. Düzeni uyarlamanız gerekiyorsa görünüm alanı mantığını kullanın. Etkileşimleri ayarlamanız gerekiyorsa işaretçi ve hover tespiti kullanın. Kısıtlı cihazlarda ağır efektleri azaltmak için özellik ve performans sinyallerini birleştirin. Bu, yanlış varsayımları düşürür ve mimarinizi temizler.
JavaScript’te Mobil Tespitine Başlamanın Yolu
Başlamanın en kolay yolu, mobil için mükemmel bir tanımlamayı kovalamaktan vazgeçip değiştirmek istediğiniz belirli davranışı tanımlamaktır. Bu çerçeve uygulamayı basitleştirir. Artık her olası cihazı tanımlamaya çalışmıyorsunuz. Belirli bir kullanıcı deneyimi sorununu çözüyorsunuz.
Örneğin, navigasyonunuz dokunmatik odaklı cihazlarda bozuluyorsa, işaretçi ve dokunmatik tespitine odaklanın. İçeriğiniz küçük ekranlarda sıkışık hissediyorsa, görünüm alanı tabanlı mantığa odaklanın. Üçüncü taraf bir betik, daha küçük cihazlarda yavaşlamalara neden oluyorsa, ekran genişliğine, ağ farkındalığına sahip yüklemeye ve kademeli iyileştirmeye odaklanın.
Öncelikle duyarlı tasarımla başlayın
JavaScript tespit mantığını yazmadan önce, düzeninizin CSS ile zaten duyarlı olduğundan emin olun. Birçok durumda CSS medya sorguları sorunu JavaScript’ten daha zarif biçimde çözer. JavaScript’teki mobil tespiti, genelde davranışı desteklemeli, duyarlı tasarımı tamamen değiştirmemelidir.
Görsel düzen ve boşluklar zaten duyarlı olduğunda, JavaScript’iniz daha hafif ve niyetli hale gelir. Ancak cihaz farkındalığına sahip mantığı eklediğinizde, bu mantık yalnızca etkileşim, performans veya koşullu yükleme gerektiğinde eklenmelidir.
Davranış değişiklikleri için özellik tespiti kullanın
Bir arayüzün nasıl davranacağını değiştirmek hedefinizse, özellik tespiti genelde doğru başlangıç noktasıdır. Bu, tarayıcının bir yeteneğe sahip olup olmadığını kontrol etmek anlamına gelir; cihaz etiketinden türetmeye çalışmaktan ziyade. Özellik tespiti hakkında daha fazla bilgi için bakınız: özellik tespiti.
İşte hover desteğine göre bir menü etkileşimini uyarlayan pratik bir örnek:
const canHover = window.matchMedia('<(hover: hover)').matches;
const menuButton = document.querySelector('.menu-button');
const menu = document.querySelector('.menu');
if (canHover) {
menuButton.addEventListener('mouseenter', () => {
menu.classList.add('open');
});
menuButton.addEventListener('mouseleave', () => {
menu.classList.remove('open');
});
} else {
menuButton.addEventListener('click', () => {
menu.classList.toggle('open');
});
}
Bu güçlü bir kalıp çünkü kullanıcı ile nasıl etkileşime girdiğine uyum sağlar, hangi cihaz adını taşıdığına bakmaz. Dokunmatik bir dizüstü bilgisayar ile bir telefon her ikisi de hover tabanlı mantıktan kaçınabilir, fakat bir masaüstü tarayıcı zengin fare dostu davranışı sürdürür.
Gerekli olduğunda sinyalleri birleştirin
Bazen tek bir sinyal yeterli değildir. Mobil kullanıma ilişkin daha geniş bir tahmin yapmak istiyorsanız, kontrolleri birleştirmek kesinlik iddia etmeden doğruluğu artırabilir.
function isLikelyMobile() {
const smallScreen = window.matchMedia('<(max-width: 768px)').matches;
const coarsePointer = window.matchMedia('<(pointer: coarse)').matches;
const mobileUA = /Android|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i.test(
navigator.userAgent
);
return smallScreen && (coarsePointer || mobileUA);
}
console.log(isLikelyMobile());
Bu, güvenlik veya iş açısından kritik bir kural olarak kullanılmamalıdır. Bu sadece bir sezgiseldir. Ancak analitikler veya hafif kullanıcı deneyimi ayarlamaları için bir geri dönüş kategorisi gerektiğinde kullanışlı olabilir.
Yeniden boyutlandırma ve yön değişikliklerini izleyin
Bir yaygın hata, sayfa yüklenir yüklenmez bir kez denemek ve sonra asla güncellememektir. Mobil durumlar sayfa açıkken değişebilir. Yön değiştirme, bölünmüş ekran uygulamaları, katlanabilir cihazlar ve tarayıcı yeniden boyutlandırma çevreyi etkiler.
function updateDeviceState() {
const mobileSized = window.matchMedia('<(max-width: 768px)').matches;
document.body.classList.toggle('mobile-sized', mobileSized);
}
window.addEventListener('resize', updateDeviceState);
window.addEventListener('orientationchange', updateDeviceState);
updateDeviceState();
Bu tür olay tabanlı güncelleme, arayüzünüzü mevcut bağlama göre hizalı tutar. Özellikle gösterge panelleri, web uygulamaları, rezervasyon sistemleri ve uzun süre açık kalan araçlar için çok önemlidir.
Aşırı implementasyon hatalarından kaçının
İlk hata, kullanıcı aracısı tespitini tek gerçek kaynak olarak kullanmaktır. Bu kolay görünebilir, ancak zamanla görünür hatalara yol açar. İkincisi, mobil tespiti temel içeriği erişilemez hale getirmek için kullanmaktır. Kullanıcılar, betiğiniz yanlış tahmin ettiği için temel işlevleri kaybetmemelidir.
Bir diğer yaygın sorun aşırı mühendislik yapmaktır. Her sitenin karmaşık bir cihaz tespit katmanına ihtiyacı yoktur. Amacınız yalnızca daha küçük ekranlarda kartları üst üste dizmek veya dokunmatik alanları büyütmekse, CSS ve birkaç hedefli JavaScript kontrolü yeterlidir. Mantığı gerçek ürün ihtiyaçlarına bağlayın.
Çoğu web sitesi için pratik bir kurulum
Birçok iş sitesi ve web uygulaması için mantıklı bir yaklaşım şu şekilde görünür:
- Layout ve boşluk için CSS medya sorgularını kullanın.
- Görünüm alanı veya giriş türüne bağlı davranış için JavaScript’te matchMedia() kullanın.
- Dokunmatik, hover veya işaretçiyle ilgili etkileşimler için özellik tespiti kullanın.
- Edge vakaları veya analizler için kullanıcı aracısı kontrollerini ölçülü kullanın, ana strateji olarak değil.
Bu iş akışı, ön yüzünüzü kırılgan hâle getirmeden esneklik sağlar. Ayrıca projeler arasında test etmek, açıklamak ve sürdürmek için daha kolaydır.
Mobil tespit mantığınızı test etmek
Test etme önemli çünkü mobil tespit hataları çoğunlukla uç durumlarda saklıdır. Bir sayfa, telefon genişliğine küçültülmüş bir masaüstü tarayıcısında düzgün görünebilir, ancak dokunmatik girişli gerçek bir cihaz ve tarayıcı çerçevesi ile farklı davranabilir.
Hızlı görünüm alanı kontrolleri için tarayıcı geliştirici araçlarını kullanın, ancak mümkün olduğunca gerçek telefonlar ve tabletlerde de test edin. Yön değiştirmelere, klavye örtülerine, dokunma davranışına, hover durumlarına ve daha yavaş koşullarda performansa dikkat edin. Siteniz sadece geliştiricilere değil müşterilere de hizmet ediyorsa, bu ayrıntılar kullanıcı deneyimini tespit yönteminden daha fazla şekillendirir.
Sonuç
JavaScript’te Mobil Tespiti mükemmel bir cihaz kategorisini belirlemekten çok, işi için doğru sinyali seçmekle ilgilidir. Kullanıcı aracısı tespiti sınırlı durumlarda hâlâ yardımcı olabilir, ancak modern geliştirme görünüm alanı boyutu, özellik desteği, dokunmatik yetenek ve giriş davranışına odaklandığında daha iyi çalışır. Bu yaklaşım daha dayanıklı, kullanıcı deneyimi kararları için daha doğru ve sürdürülmesi daha kolaydır.
Bir sonraki adım basittir. Telefonda farklı davranan bir bölümünüzü inceleyin, örneğin gezinme, formlar, medya veya etkileşimli araçlar. Ardından gerçekten neyi tespit etmeniz gerektiğini sorun: ekran alanı, dokunmatik, hover veya kaba bir mobil sezgisel yaklaşım mı? Bunu net bir şekilde yanıtladıktan sonra JavaScript’iniz daha temizleşir ve kullanıcılarınız her cihazda daha sorunsuz bir deneyim yaşar.