Chrome Geliştirici Araçları ile Duyarlı Tasarımı test etmek

Duyarlı web tasarımı, internete erişen mobil cihaz kullanıcılarının sayısının artması nedeniyle vazgeçilmezdir. Web sitenizin farklı ekran boyutlarında ve çözünürlüklerinde doğru şekilde görüntülenmesini sağlamak için Chrome Geliştirici Araçları, duyarlı tasarımı test etmek için güçlü bir yöntem sunar. Bu kılavuzda sana, mobil görünümü nasıl etkinleştireceğini ve web sitenizin uyumluluğunu kontrol etmek için çeşitli cihaz boyutlarını nasıl simüle edeceğini göstereceğim.

En Önemli Bulgular

• Farklı cihazlarda sitenizin düzenini test etmek için Geliştirici Araçları üzerinden mobil görünümü etkinleştirebilirsin.
• Özel cihazları, standart çözünürlükleri ve ekran oranlarını seçmek faydalı olacaktır.
• Touch-Simülasyonu ve Pinch-to-Zoom gibi özellikler, mobil cihazların kullanıcı deneyimini taklit etmek için de yararlıdır.

Adım Adım Kılavuz

Chrome Geliştirici Araçları'ndaki mobil görünümü kullanmak için bu basit adımları izle:

1. Mobil Görünümü Etkinleştirme

Mobil görünümü etkinleştirmek için Chrome Geliştirici Araçları'nı aç. Bunları ya menüden ya da kısayol tuşu ile açabilirsin. "Cihaz Kaydırıcısı'nı Değiştir" düğmesine tıkla veya MacOS'ta Command + Shift + M ya da Windows'ta Control + Shift + M kısayol tuşlarını kullan.

Mobil görünümü etkinleştirdikten sonra, web sitesi mobil görünüme geçecek. Şimdi web sayfasının bir mobil cihazda nasıl göründüğünü görebilirsin.

2. Cihaz Boyutunu Seçme ve Uyarlama

Geliştirici Araçları'ndaki üst çubukta, ekran boyutlarını seçebileceğin bir açılır menü bulunmaktadır. Varsayılan olarak, seçenek "Duyarlı" olarak ayarlanmıştır. Bu ayarı manuel olarak çözünürlük ve boyut ayarlamak için değiştirebilirsin. Belirli bir cihaz boyutu arıyorsan, listeden seçmeli ve örneğin iPhone 12 Pro veya Pixel 7 gibi cihazları seçmelisin.

Geliştirici Araçları, seçilen cihazın gerçek boyutunu gösterecektir. Tarayıcının kullandığı etkili çözünürlüğün, cihazın varsayılan çözünürlüğünden farklı olabileceğini unutma.

3. Cihaz Piksel Oranını Anlama

Test sırasında önemli bir unsur, "Cihaz Piksel Oranı"dır. Üç nokta menüsünü açarak ve ilgili değerleri değiştirerek Cihaz Piksel Oranını değiştirebilirsin. Cihaz Piksel Oranı, tarayıcının kullandığı fiziksel pikseller ile tarayıcının kullandığı piksel sayısı arasındaki oranı açıklar.

Örneğin iPhone 12 Pro için oran 3:1'dir. Bu, üç fiziksel pikselin tarayıcıda bir birimi temsil ettiği anlamına gelir. Görüntülerin ve metinlerin net ve keskin görünmesini sağlamak için, doğal çözünürlük çok daha yüksektir.

4. Düzen ve Görünümü Ayarlama

Artık seçili cihazda mobil görünümü test edebildiğine göre, boyutları da ayarlayabileceğini fark edeceksin. Farklı genişlikler ve yükseklikler denemek için görünüm alanının köşelerini veya kenarlarını sürükleyerek tıklayabilirsin.

Ayrıca, düzeni değiştirebilir, örneğin dikey (Portre) moddan yatay (Manzara) moda geçiş yapabilir ve farklı koşullar altında düzenin nasıl tepki verdiğini görebilirsin.

5. Dokunma Girişlerini Simüle Etme

Dikkate değer bir özellik daha, Dokunma hareketlerini simüle etme olanağıdır. Fare ayarlanırken, bu parmak göstergesi ile değiştirilir. Bu sayede, mobil bir web sitesinde kullanıcıların kaydırma yaparken veya menüler arasında gezinirken nasıl etkileşimde bulunduğunu taklit edebilirsin.

Pinch-to-Zoom hareketini yapmak için Shift tuşuna basılı tut ve fare ile sürükle. Bu, gerçek cihazlarda kullanıcıların yapacağı hareketi taklit eder.

6. Sayfa Yükleme Hızını Test Etme

Web sitesinin yükleme hızını test etmek için Throttling fonksiyonunu kullanabilirsin. Bu fonksiyon, veri iletişim hızını değiştirmenize olanak tanır ve web sayfanızın kötü ağ koşullarında nasıl çalıştığını simüle etmenize yardımcı olur.

Efektleri karşılaştırmak için Throttling ayarlarını "Düşük-End Mobil" veya "Throttling Yok" olarak değiştir. Web sitesinin farklı hızlarda yüklendiğini göreceksiniz, bu da yavaş bağlantıları test ederken kullanıcı deneyimini incelemenize yardımcı olur.

7. Ekran Görüntüleri Oluşturma

Simüle edilmiş mobil görünümün anlık bir örneğine ihtiyacınız varsa, bu özelliği geliştirici araçlardan doğrudan bir ekran görüntüsü alarak yapabilirsiniz. Ekran görüntüsünü otomatik olarak indirmek için Araç Çubuğu'ndan ilgili seçeneğe tıklayın.

8. Varsayılan Değerlere Sıfırlama

Eğer mobil görünüm ayarlarını sıfırlamak istersen, bunu yine Geliştirici Araçlar üzerinden yapabilirsin. Tüm değişiklikleri varsayılan değerlere geri almak için ilgili düğmeye tıkla.

Bu şekilde varsayılan cihaz ayarları ile hızlıca yeni bir test yapabilirsin.

Özet

Bu kılavuzda Chrome Geliştirici Araçları'ndaki mobil görünümü nasıl etkinleştireceğinizi ve yapılandıracağınızı öğrendiniz. Farklı cihazları simüle edebilir, Cihaz Piksel Oranını ayarlayabilir, Dokunma Jestlerini deneyimleyebilir ve web sitenizin yükleme hızını test edebilirsiniz. Bu fonksiyonların anlaşılması ve doğru şekilde uygulanması, web sitenizin duyarlı tasarımını etkili bir şekilde optimize etmenize yardımcı olacaktır.