Duyarlı Görüntüleyici, mevcut web sayfasının birden fazla cihaz görüntü alanı boyutunda yan yana oluşturulduğunu gösterir — hepsi tek bir ekranda. Tasarımınızın iPhone, iPad, Android telefonları, dizüstü bilgisayarlar ve masaüstü bilgisayarlarda nasıl göründüğünü aynı anda görün. Bir görüntü alanını kaydırın, tüm diğerleri takip eder, aynı içerik bölümünü her cihaz boyutunda karşılaştırmayı kolaylaştırır.
Duyarlı tasarımları test etmek geleneksel olarak tarayıcı penceresini yeniden boyutlandırmak veya DevTools'un cihaz araç çubuğunu kullanarak görüntü alanı boyutları arasında tek tek geçiş yapmak anlamına gelir. Bu işe yarar, ancak aynı anda yalnızca bir boyut görebilirsiniz — bu da bir bölümün mobilde ve masaüstünde aynı anda nasıl göründüğünü karşılaştırmayı imkansız kılar. Duyarlı Görüntüleyici, sayfayı aynı anda birden fazla görüntü alanında oluşturup ekranınızda yan yana görüntüleyerek bunu çözer. Önceden ayarlanmış cihaz profillerinden (iPhone 15, iPad Pro, Pixel 8, MacBook, 1440p Masaüstü) seçim yapın veya özel boyutlar girin. Her görüntü alanı, statik bir ekran görüntüsü değil, sayfanın tamamen oluşturulmuş bir örneğidir — birini kaydırın ve diğerleri aynı konuma kayar. Bu senkronize kaydırma, tam olarak aynı içerik alanını tüm cihaz boyutlarında bir bakışta karşılaştırmanıza olanak tanır. Duyarlı sorunları tespit etmenin en hızlı yoludur: yanlış sarılan navigasyon, kapsayıcılarını aşan resimler, küçük ekranlarda okunamaz hale gelen metin veya beceriksizce çöken boşluk.
Mevcut sayfayı ekranınızda yan yana görüntülenen birden fazla görüntü alanı boyutunda aynı anda oluşturulmuş olarak görün. Görünümler arasında geçiş yapmadan mobil, tablet ve masaüstü düzenlerini bir bakışta karşılaştırın. Her görüntü alanı sayfanın tamamen işlevsel bir oluşturmasıdır.
Popüler cihaz ön ayarlarından oluşan bir kütüphaneden seçim yapın: iPhone 15 (393×852), iPhone SE (375×667), iPad (820×1180), iPad Pro (1024×1366), Pixel 8 (412×915), MacBook Pro (1440×900) ve Full HD Masaüstü (1920×1080). Ön ayarlar mevcut cihaz boyutlarıyla güncellenir.
Standart olmayan görüntü alanı boyutlarını test etmek için herhangi bir özel genişlik ve yükseklik girin. Sayfanın tam olarak 768px genişliğinde (ortak tablet kesme noktası) nasıl göründüğünü kontrol etmeniz mi gerekiyor? Sadece yazın. Ön ayarların yanına birden fazla özel görüntü alanı eklenebilir.
Bir görüntü alanını kaydırın ve tüm diğerleri aynı dikey konuma kayar. Bu, tam olarak aynı içerik bölümünü tüm cihaz boyutlarında aynı anda karşılaştırmanıza olanak tanır — kahraman alanının, fiyatlandırma tablosunun veya altbilginin mobil, tablet ve masaüstünde nasıl göründüğünü görün.
Her görüntü alanı gerçekçi bir cihaz çerçevesi içinde görüntülenir — telefon çerçeveleri, tablet kenarlıkları, dizüstü bilgisayar kromu. Görsel bağlam, paydaşların incelemeler ve sunumlar sırasında hangi görüntü alanının hangi cihazı temsil ettiğini anlamasına yardımcı olur.
Belirli boyut karşılaştırmalarına odaklanmak için tek tek cihazları açıp kapatın. Sadece mobil ve masaüstünü karşılaştırıyor musunuz? Tablet ön ayarlarını seçimi kaldırın. Sadece iPhone'ları görmek mi istiyorsunuz? Diğer her şeyin seçimini kaldırın. Hangi görüntü alanlarının görünür olduğu üzerinde tam kontrol.
Duyarlı bir tasarımı uyguladıktan sonra, her bölümün tüm hedef cihaz boyutlarında doğru göründüğünü doğrulamak için Duyarlı Görüntüleyiciyi kullanın. Metin taşmalarını, resim ölçeklendirme sorunlarını, navigasyon çökme sorunlarını ve boşluk tutarsızlıklarını — hepsini tek bir görünümde yakalayın.
Bir inceleme toplantısı sırasında müşterilere web sitelerinin cihazlarda nasıl göründüğünü gösterin. Yan yana görünüm hemen sezgiseldir — görüntü alanı kavramlarını açıklamaya gerek yok. Müşteriler mobil, tablet ve masaüstünü aynı anda görebilir.
Belirli bir genişlikte düzenin bozulduğunu mu görüyorsunuz? Sorunun meydana geldiği tam piksel genişliğinde özel bir görüntü alanı ekleyin ve hangi CSS kesme noktasının soruna neden olduğunu belirlemek için biraz daha geniş ve daha dar görüntü alanlarıyla karşılaştırın.
Uzun başlıkların mobilde doğru sarıp sarmadığını, veri tablolarının küçük ekranlarda kaydırılabilir hale gelip gelmediğini, form girişlerinin dokunmak için yeterince büyük olup olmadığını ve CTA'ların tüm cihaz boyutlarında görünür ve erişilebilir kalıp kalmadığını kontrol edin.
Etkileyici duyarlı tasarım vitrin görüntüleri oluşturmak için çoklu cihaz görünümünü kullanın. Portföy sunumları için tasarımınızı 3-4 cihaz boyutunda gösteren Duyarlı Görüntüleyicinin ekran görüntüsünü alın.
DevSuite Pro yüzen yuvasını açın ve Duyarlı Görüntüleyici simgesine tıklayın. Sayfa, yan yana görüntülenen cihaz çerçeveleri ile çoklu görüntü alanı moduna geçer.
Üstteki cihaz çubuğu mevcut ön ayarları (iPhone, iPad, Pixel, MacBook, Masaüstü) gösterir. Açıp kapatmak için cihazlara tıklayın. Seçilen cihazlar aşağıda görüntü alanları olarak görünür.
Özel bir görüntü alanı eklemek için "Özel" düğmesine tıklayın ve belirli genişlik × yükseklik boyutları girin. 768px, 1024px veya 1280px gibi tam kesme noktası değerlerini test etmek için kullanışlıdır.
Herhangi bir görüntü alanını kaydırın — tüm diğerleri aynı konuma takip eder. Aynı bölümün tüm seçili cihaz boyutlarında aynı anda nasıl göründüğünü karşılaştırın.
Çoklu görüntü alanı modundan çıkmak ve normal tek sayfa görünümüne dönmek için Duyarlı Görüntüleyici simgesine veya kapat düğmesine tekrar tıklayın.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 39'dan fazla geliştirici aracının kilidini açın.
