Aygıt Orientation (Tutuş Biçimi) Değişiklikleri ve Mobil Uygulamalar

Web teknolojileri ile mobil cihazlar için uygulama geliştirirken işimize yarayabilecek önemli bir bilgi, cihazın tutuluş tipidir (dik/yatay) diyebiliriz.

Bu tip durumlarda, screen objesinin altında sunulan orientation değişkenini screen.orientation olmak üzere kullanabiliriz. Bu değişken bir obje dönmekte ve obje şu tip bir yapıya sahip;

{ 
   type: "landscape-primary", 
   angle: 0, 
   onchange: null, 
   ownerGlobal: Window → newtab
}

Orientation değişim durumlarını da, bir built-in event olan orientationchange ile takip edebilirsiniz. Bu event'i window objesi üzerinde kullanabilir ve oryantasyon değişikliğinde gerçekleştirilmesini istediğiniz fonksiyonu veya kod betiğini belirleyebilirsiniz;

window.addEventListener("orientationchange", function() {
    alert("Cihaz şuan: " 
          + screen.orientation + 
          " tutuş pozisyonuna geçti.");
});

Mobil Cihazlarda Orientation Açısı

Eğer dikkatinizi çekti ise, screen.orientation objesi içerisinde angle isimli bir değişken bulunuyor. Bu değişken, ekranın dik dik tutulduğu durumda, x ekseninde hangi açıda bulunduğunu temsil eder.

orientation açısı

NOT: Eski cihazlarda 0, 90, 180, -90 değerlerini almakta olmasının yanında, yeni bazı cihazlar için bu değişken, çağırıldığı anın açısını gerçek değer olarak vermektedir.

Ayrıca bu açı değerini kullanarak da, uygulama içerisindeki aksiyonları gerçekleştirebilirsiniz.

screen.orientation Desteklemeyen Cihazlar

Bazı eski cihazlar, bu özelliği desteklememekte. Tam bir listesi için caniuse.com adresinden aldığımız ekran görüntüsünü paylaşalım;

screen.orientation tarayıcılara göre kullanılabilirlik grafiği

Görüldüğü gibi, chrome motoru kullanmayan android tarayıcısında ve safari'de hiç bir şekilde desteklenmiyor.

Buna ek olarak benim karşılaştığım durumda, Safari için kullanılabilecek özel bir özellik var;

console.log(window.orientation);

Safari'de screen objesi yerine window objesi üzerindeki orientation değişkeni sadece bir intiger döndürüyor ve bu bir açı değeri. Yani bir bakıma bu değerin, screen.orientation.angle değerine eşit olarak kullanılabilir olduğunu söyleyebiliriz.

Cordova'da Screen Orientation Özelliği

Cordova kullanarak, uygulamanızın anlık oryantasyon değişimini native taraftan alabilirsiniz. Bu hem daha sağlıklı hem de daha az baş ağrıtıcı bir çözüm diyebilirim;

Benim de projelerimde kullandığım şu eklentiyi kullanabilirsiniz: cordova-plugin-screen-orientation

Eklenti, normal screen objenize 3 yeni native metod ve değişken ekliyor;

// Orientation değişimini belirli bir değere kilitle.
screen.lockOrientation('portrait');

// Orientation değişimini otomatik yap
screen.unlockOrientation();

// Şuanki Orientation
console.log(screen.orientation);

Geniş bir eklenti kullanmak istemiyorum diyorsanız, kendi uygulamanız için, bu eklentinin platformlar için sunduğu farklı javascript dosyalarını inceleyip mimik edebilirsiniz.

Yorumları Göster veya Yeni Yorum Yaz