Şu aralar sitelerimiz için olmazsa olmaz özelliklerden birisi de kullandığımız arayüz’ün “responsive” olmasıdır.
Nedir bu “responsive”?
Responsive tasarım demek, kısaca cihaz uyumlu web tasarım demektir. Yani, yapılan arayüz hem telefonda, hem tablette, hem bilgisayarda sorunsuz çalışıyorsa “responsive”dir..
Ne mi yapıyoruz?
Bir çoğumuz, stil dosyalarında veya diğer kısımlarda değişiklikleri uyguladıktan sonra elimize telefonu, tableti, hatta varsa 1024px genişliğinde biraz eski bilgisayarımızı alır, arayüzümüzü kontrol ederiz.
Chrome ise buna bir çözüm bulmuş. Bilgisayardan genişliği ayarlayarak her cihazda kontrol edebiliyoruz.
Google Chrome Developer Tools’ta responsive test özelliği nasıl açılır?
Hemen anlatalım;
-> F12 tuşuna basıyoruz veya sağ üstten seçenekler kısmına gelip, diğer araçlar / geliştirici araçları’na tıklıyoruz.
Açılan kısmın sol üst tarafında 2 tane icon göreceğiz.
-> 2.icona yani telefon ikonuna tıklıyoruz veya CTRL+Shift+M ile device mode’ı açıyoruz.
*Kapatmak için tekrardan ikona tıklayabilir veya CTRL+Shift+M komutunu uygulayabiliriz.
Gördüğünüz gibi sol üst kısımda;
-> Device kısmından cihaz seçip, seçtiğiniz cihazın çözünürlüğünde kontrol edebilirsiniz.
-> Device kısmının altındaki çözünürlük kısmına dilediğiniz çözünürlüğü girip, yine kontrol edebilirsiniz.
-> Veya “Zoom to fit” butonunun tikini kaldırarak, tam anlamıyla cihazdaki görünümü elde edebilirsiniz.
Sonraki makalemde görüşmek üzere,
Sağlıcakla..
Kaynak: http://fomerbeyoglu.com/blog/google-chromeda-eklentisiz-responsive-test-etmek/