Pencere boyutlarını tarayıcı değişkenleri ile sabit bir dive yazdırmak

Giriş

Responsive kodlama yaparken hangi kırılma noktalarında grid yapısının nasıl davrandığını öğrenmek için bazı eklentilerden ya da tarayıcıların entegre geliştirici araçlarından yardım alıyoruz. Örneğin Firefox'un Firebug CSS Panelinden, ya da v33 versiyonu ile gelen entegre geliştirici panelinde bulunan mobil önizleme (ctrl + shift + m) penceresinde olduğu gibi. Zamanı daha efektif kullanabilmek ve tarayıcı içinde ekstra bir panelle uğraşmamak adına, pencere içinde sürekli görününür bir yerden ekran boyutlarını alabilmek için kendi işlerimde kullandığım kod bloğunu paylaşıyorum.

Önizleme

Fonksiyonu oluşturma

Öncelikle, window resize ve load fonksiyonlarına bağlayacağımız fonksiyonu oluşturalım

var windowSizePrint = function() {
}

Window boyutlarını değişkenlere aktaralım

var windowWidth = $(window).width();
var windowHeight = $(window).height();

Window boyutlarını tutacak div'in eklenip eklenmediğini kontrol ederek bir kez DOM'a yerleştirelim

  if (!$("#window-size-info").length) {
    $('body').append('<div id="window-size-info"><div><span class="w"></span> X <span class="h"></span></div><style type="text/css">#window-size-info{z-index:9999999;position:fixed;right:0px;bottom:30px;padding:3px 8px;font-family:"Open Sans","Lato",Tahoma;font-size:15px;color:#fff;background-color:#000;box-shadow:0 0 0 2px#fff;}</style></div>');
  }

Boyutları span'lere yazdıralım

$('#window-size-info span.w').text(windowWidth);
$('#window-size-info span.h').text(windowHeight);

windowSizePrint Fonksiyonunu pencere her yeniden boyutlandığında ve ilk yüklendiğinde çalıştıralım

$(document).ready(windowSizePrint);
$(window).load(windowSizePrint);
$(window).resize(windowSizePrint);

Tarayıcı değişkenlerini tutan değişkeni tanımlayalım.

var nua = navigator.userAgent;

Tarayıcı değişkenlerinin tutulduğu string'i regex ile kontrol parçalayıp tek bir objede tutalım

var browser = browser || {};
browser = {
  nua            : nua,
  html           : $('html').attr('class'),
  webkit         : /webkit/gi.test(nua),
  gecko          : /gecko/gi.test(nua),
  mobile         : /Mobile/gi.test(nua),
  windows        : /Windows/gi.test(nua),
  mac            : /Mac OS/gi.test(nua),
  chrome         : /Chrome/gi.test(nua),
  firefox        : /Firefox/gi.test(nua),
  apple          : /Safari/gi.test(nua),
  ipod           : /iPod/gi.test(nua),
  iphone         : /iPhone/gi.test(nua),
  ipad           : /iPad/gi.test(nua),
  android        : /Android/gi.test(nua),
  androidVersion : /Android/gi.test(nua) ? nua.match(/Android ([0-9\.]+);/)[1] : "",
  ie             : /MSIE/gi.test(nua),
  ie11           : /MSIE 11/gi.test(nua),
  ie10           : /MSIE 10/gi.test(nua),
  ie9            : /MSIE 9/gi.test(nua),
  ie8            : /MSIE 8/gi.test(nua),
  ie7            : /MSIE 7/gi.test(nua),
  ie6            : /MSIE 6/gi.test(nua),
  operaMini      : /Opera Mini/gi.test(nua),
  ucBrowser      : /UCBrowser/gi.test(nua),
  x64            : /WOW64/gi.test(nua),
  x86            : /WOW86/gi.test(nua),
  tablet         : $(window).width() >= 768 && /Mobile/gi.test(nua),
  desktop        : $(window).width() >= 768 && !/Mobile/gi.test(nua),
  phone          : $(window).width() < 768 && /Mobile/gi.test(nua),
};

Developer konsolunun tamamını tarayıcı değişkenlerinin kaplamaması için log'ları gruplayalım.

For döngüsü ile bütün değişkenleri browserVariables'ta string olarak saklayalım

console.groupCollapsed("browser variables");
var browserVariables = "";
for (var prop in browser) {
  if (browser.hasOwnProperty(prop)) {
    console.log(prop + " : " + browser[prop]);
    browserVariables += prop + " : " + browser[prop] + "\n";
  }
}
console.groupEnd();

Ve son olarak, div üzerine mouse ile geldiğimizde değişkenlerin gözükmesi için, tittle niteliğine browserVariables string'ini yazdıralım

$(function() {
  $("#window-size-info > div").attr("title", browserVariables);
});

Kod bloğunun Gist şeklinde tamamlanmış görüntüsü

Codepen'den canlı önizleme

Değişiklikleri görmek için tarayıcı boyutlandırın. Ya da mouse ile boyutların yazdırıldığı kutu üzerinde gezinin.

See the Pen Window Dimension Print by Ömer Aslanbakan (@Aslanbakan) on CodePen.