JavaScript ile Mobil Tarayıcılar Nasıl Tespit Edilir

Mobil algılama, uygulama geliştirmenin her zaman çok önemli bir yönü olmuştur. Hem uygulamalar hem de yazılım ve web siteleri için geçerlidir. Mobil tarayıcı aracılarını kontrol etmek için sayısız neden vardır. En önemlisi, benzersiz bir kullanıcı deneyimi oluşturma yeteneği.

Yalnızca UAParser.js kitaplığı, haftalık milyonlarca paket indirmesi alır. Ve çoğu durumda, sıfırdan bir şey inşa ediyorsanız bu yeterlidir. Peki ya JavaScript ile mobil tarayıcıları algılamanın alternatif yolları?

Bazen herhangi bir kitaplık olmadan işi yapan basit bir çözüm isteyebilirsiniz. Ve bu makalede, sizin için mobil kullanıcıları tespit etmek için bir avuç JavaScript tekniği sunacağım. Herhangi birini kaçırırsam bana bildirin!

navigator.userAgent

Tarayıcı algılamanın kutsal kâsesi, navigator.UserAgent özelliğidir.

 if (https://c6c8j7x5.rocketcdn.me/Android|iPhone/i.test(navigator.userAgent)) { // This checks if the current device is in fact mobile } // an alternative structure to check individual matches if ( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) ) { // making individual checks }

Bu, elbette, bunu yapmanın çok ilkel bir yoludur. User-Agent özelliği sahte olabileceğinden kolayca değiştirilebilir. Ancak, işi yaptığı için onu çeşitli projelerde kullanabilirsiniz. Örneğin, Açılış sayfaları veya bir mobil sürüme özel yönlendirme yapmak.

Tarayıcı türünü tespit etmek ve içeriği belirli tarayıcıya göre görüntülemek için navigator.userAgent nasıl kullanılır?

Pekala, Chrome ve Firefox (veya bu durumda Android ve iPhone) gibi belirli bir tarayıcıyı tespit etmek istediğiniz benzersiz bir kullanım durumu olabilir ve ardından bu verileri belirli içeriği görüntülemek için kullanın. Bu yaklaşım genellikle belirli tarayıcılar için indirme bağlantılarını sağlamak/değiştirmek için kullanılır.

Böyle bir durumda aşağıdaki fonksiyonu kullanabilirsiniz.

 function detectBrowser() { let userAgent = navigator.userAgent; let browserName; if (userAgent.match(/chrome|chromium|crios/i)) { browserName = "Chrome"; } else if (userAgent.match(/firefox|fxios/i)) { browserName = "Firefox"; } else if (userAgent.match(/safari/i)) { browserName = "Safari"; } else if (userAgent.match(/opr\//i)) { browserName = "Opera"; } else if (userAgent.match(/edg/i)) { browserName = "Edge"; } else if (userAgent.match(/android/i)) { browserName = "Android"; } else if (userAgent.match(/iphone/i)) { browserName = "iPhone"; } else { browserName = "Unknown"; } document.querySelector("div.form-style h3").innerText = "You are browsing with: " + browserName + ""; }

Kontrol etmek istemediğiniz tarayıcılar için çeşitli else if ifadelerini yorumlayabilir ve aynı şekilde kontrol etmek istediğiniz ilave tarayıcılar ekleyebilirsiniz.

TouchEvent

Mobil kullanıcıları tespit etmenin bir yolu, cihazın dokunmatik ekranı olup olmadığını kontrol etmektir.

GlobalEventHandlers.ontouchstart özelliğini kullanarak, kullanıcının uygulamanızla nasıl etkileşime girdiğini görmek için basit bir kontrol yapabilirsiniz. Etkileşim dokunmatik ekrandan geldiyse uygulamanın veya sayfanın mobil sürümünü döndürebilirsiniz.

 if ("ontouchstart" in document.documentElement) { // content for touch-screen (mobile) devices } else { // everything else (desktop) }

Surface gibi dokunmatik ekranlı cihazlarda bu özellik yoktur. Bu nedenle, masaüstü tabanlı dokunmatik cihazlardan gelen kullanıcılar, sayfalarınızın masaüstü sürümünü görmeye devam edecek.

Window.matchMedia()

Window.matchMedia(), JavaScript ile mobil kullanıcıları algılamak için en iyi özelliklerden biridir. Ve öyle çünkü doğrudan CSS ile etkileşim kurmanıza izin veriyor.

Çoğu durumda, yerleşik mobil algılama araçlarına sahip oldukları için medya sorguları üstündür. Örneğin, “pointer:coarse” ifadesinin doğru olup olmadığını kontrol etmek için bir arama yapabilirsiniz.

Bu özel ifade, aygıtın işaretçisinin iyi mi yoksa kaba mı olduğunu doğrular.

 let isMobile = window.matchMedia("(pointer:coarse)").matches;

Alternatif olarak, cihaz hem ince hem de kaba bir işaretçiye sahip olabilir. Bu kullanım durumu için, herhangi bir işaretçinin kaba olup olmadığını kontrol edebiliriz.

 let isMobile = window.matchMedia("(any-pointer:coarse)").matches;

Bunun yalnızca sorguyu doğru veya yanlış olarak doğruladığını unutmayın. Mobil cihazları kontrol etmenin daha iyi bir yolu, medya sorgularını doğrudan kullanmaktır.

 let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;

Bu sorgu, doğrudan cihazın maksimum genişliğini kontrol edecek ve kriterlere uyup uymadığını belirleyecektir. Yine, tüm cihazları doğru bir şekilde almak için bu oldukça fazla iş. Bu nedenle, önceden tanımlanmış tüm cihaz türleri ile önceden oluşturulmuş bir kitaplığı kullanmak daha kolaydır.

Belirli bağlamlarda faydalı

Yıllar boyunca, cihaz türlerini algılamak için birçok JavaScript özelliği olmuştur. Birçoğu kullanımdan kaldırıldı, ancak çoğu kitaplıklara entegre edildi. Bu da uygun mobil algılamayı yapmanın en iyi yolu olur.

Son olarak, çoğu modern çerçeve, çerçevenin kendisinin bir parçası olarak mobil algılamayı zaten içerir. Tüm ayak işlerini yapmak istemiyorsanız, araştırmaya değer.

Mobil Cihazları Algılamak için Kitaplıklar

Bu bölüm için, mobil cihazları algılamak için en popüler JavaScript kitaplıklarını listeleyeceğim. Bunların JavaScript'e özgü olduğunu bir kez daha vurguluyorum. Uygulamanızda doğru uygulama için dokümanlara bakın.

UAParser.js

Eksiksiz kütüphaneler söz konusu olduğunda, UAParser var olan en iyisidir. Yalnızca npm'de haftalık 10 milyondan fazla indirme ile UAParser, mobil cihazları algılamak için fiili çözümdür. Adından da anlaşılacağı gibi kitaplık, User-Agent dizelerini ayrıştırarak çalışır.

Ancak, onu bu kadar popüler yapan şey, yüzlerce cihaz varyasyonunu ayrıştırabilmenizdir. Ve hepsi çok iyi belgelenmiştir. Pratik cihaz satıcılarından CPU mimarisi gibi daha karmaşık algılama modellerine gidebilirsiniz.

mobile-detect.js

Bu, topluluğa Heinrich Goebl tarafından sağlanan PHP için Mobile Detect kitaplığının oldukça basit bir bağlantı noktasıdır. Kitaplığın kendisi algılama için User-Agent'ı kullanır, bu nedenle daha önce tartıştığımız gibi - en iyi seçenek değil.

Yine de, pratik HTML şablonları veya portföy projeleri söz konusu olduğunda işi yapmalıdır.

isMobile

Burada, Kai Mallea'nın User-Agent Navigator özelliğini bir kez daha ele alıyoruz. Hala basit bir çözüm olsa da, isMobile'ın çeşitli özellikler sunmasını seviyorum. Örneğin, herhangi bir mobil cihaz veya telefon veya tablet gibi belirli cihazlar için test yapabilirsiniz.

tepki-cihaz-tespit

Bir React.js geliştiricisi misiniz?

O zaman Michael Laktionov'un bu kütüphanesi tam size göre. Beklediğiniz gibi çalışır – önce kitaplık aygıt türünü algılar, ardından görünümü bu türe göre işler. Bileşen entegrasyonuyla kusursuz çalışır ve API çağrıları yoluyla daha da özelleştirilebilir.

İlginç bir gerçek, bu kitaplığın içerdiği seçicilerin sayısıdır. Akıllı TV'ler, giyilebilir cihazlar, çeşitli iPhone cihazları ve çok daha fazlası gibi cihazları kapsar. Bu, belirli bir cihaz için bir uygulama oluştururken size geniş bir tasarım seçeneği yelpazesi sunar.