Responsive Web Tasarım javaScript medya sorguları
Bu Makalede Gerçek ekran boyutlarını elde etmek ve bu değerlerin daha fazla kullanılması için JavaScript'teki medya sorgularının çalışma örneklerini göstereceğim.
Elektronik dünyadaki teknolojik gelişmelerin sonucu olarak hayatımızın ayrılmaz bir parçası haline gelen mobil cihazların kullanımı giderek yaygınlaşmış, buna bağlı olarak da web tasarımını tüm cihazlarla uyumlaştırma kaygısı ortaya çıkmıştır. Web tasarım siparişlerinde artan bir öneme ulaşan uyumluluk sorunu, yazılım ve tasarımda yenilik arayışına neden olarak web geliştiricilerini de bu konuda çözüm üretmeye zorlamıştır. Böylece yazılım ve tasarımda duyulan gereksinimler duyarlı (responsive) web tasarımı kavramını ortaya çıkartmıştır. Duyarlı tasarımın temel prensibi farklı cihazların ekran çözünürlüklerine uyum gösterecek esnek tasarımlar geliştirmektir.
Websitelerinizin tasarım ve kullanılabilirlik sorunlarının önemli bir kısmı çözünürlük ile ilgili problemlerden kaynaklanmaktadır.
Bir web geliştiricisinin en önemli görevlerinden biri, web sayfasının herhangi bir ekranın herhangi bir çözünürlüğünde doğru bir şekilde görüntülenmesini sağlamaktır. Ziyaretçiyi yatay kaydırma ve ölçeklemeyi kullanmaya zorlamayın.
CSS3 ile birlikte oldukca popüler olan Medya Sorguları'nı kullanarak cihaza ait bircok ozelligi ele alarak ilgili cihaza yonelik kodlar yazabilecegiz medya sorgularını kullanmaya alışkınız.
/* mobil telefon */
@media only screenand (max-width:320px) {
}
/* Tablet */
@media only screenand (min-width:768px) {
}
/* Bilgisayar ----------- */
@media only screenand (min-width:1200px) {
}
Yukarıdaki CSS kodu, sayfayı üç farklı cihazda stilize etmenizi sağlayacaktır
JavaScript'te Medya Sorgulaması nasıl kullanılır?
Cihazın ekran boyutunu öğrenmek için, medya istekleri pencerenin genişliğini kontrol eder. Bu durumda, cihazın genişliğine bakabilir ve kaynaklara yükleyebileceğiniz belirli bir boyutta olup olmadığını belirleyebilirsiniz.
ÖRNEK:
if (screen.width >= 600) {
//javascript kodları
}
veya alternatif olarak, daha uygun olan görünümün pencere içerik alanının genişliğini bakabiliriz.
if ( window.innerWidth < 900) {
//javascript kodları
}
Yukarıdaki Fonksiyonlar çok iyi bir şekilde çalışacaktır. Kesme noktası olarak misal 768px küçük ekranlar hedeflendiyse sadece belirtilen ekranlarda çalışacaktır; fakat tarayıcı ekranlarını küçültüp büyüttüğünüzde işlem yapmayacaktır. Bu sorunun üstesinden gelmek için resize methodunu kullanacağız.
javaScript:
function test(){
if(window.innerWidth < 800) {
alert("merhaba");
}
}
HTML:
<body onresize="test()">