Google Chrome’da cihazları taklit etmek

Web siteleri oluştururken, sitenizi birçok farklı cihazın görüntüleyeceğini göz önünde bulundurmalısınız. Bu cihazlar farklı ekran yönleri ve boyutları ile gelecek. Bu nedenle, web sitenizin mobil, tablet ve masaüstünde iyi görünmesini sağlamak hayati önem taşır.

DevBytes: Chrome DevTools Device Mode

Web sitenizi test etmek için üçüncü taraf araçları kullanmanıza gerek yoktur. Google Chrome, yerleşik bir cihaz simülatörü ile birlikte gelir. Cihazlardan herhangi birini seçebilir ve sayfanızın o cihazda nasıl görüneceğini görebilir, test edebilirsiniz. Listeye dahil olmayan özel cihazlar bile isteğinize göre ekleyebilirsiniz.

Chrome’da bir cihazı simüle etmek için: Chrome DevTool’u açın, bunu F12’ye tıklayarak yapabilirsiniz, alternatif olarak, tarayıcı pencerenizin sağ üst köşesindeki üç noktaya tıklayabilir, daha fazla araç ve ardından geliştirici araçları seçebilirsiniz. Ardından, öğeler sekmesinin yanındaki cihazlar simgesine tıklayarak cihaz görünümünü değiştirin.

Sayfanız cihaz moduna geçirilecek. Ayrıca üstteki açılır menüyü de fark edeceksiniz. Bu açılır menüden öykünmek istediğiniz cihazı seçebilir ve sayfanızın nasıl görüneceğini görüntüleyebilirsiniz.

Açılır menüdeki cihazların listesi sınırlıdır. Ayrıca, açılır listeye diğer cihazları seçmek ve eklemek için listeyi düzenleyebilirsiniz.

Özel ek cihazlar eklemek

Ayrıca özel cihazlar oluşturabilir ve ekleyebilirsiniz. Bunu yapmak için özel cihazlar düğmesine tıklayın. Hedef cihazınızın yüksekliğini ve genişliğini ve ayrıca piksel yoğunluğunu girmeniz gerekecektir. Herhangi bir mobil cihazın ekran çözünürlüğünü bu web sitesinde bulabilirsiniz. Ayrıca bir kullanıcı aracısı dizesi eklemeniz gerekecektir. Bir kullanıcı aracısı dizisi, bir web sayfası isteyen bilgisayar hakkında bilgi içeren bir dizidir. Bu web sitesi, tüm yaygın cihazlar için kullanıcı aracısı dizesine sahiptir. Son olarak cihazı ekleyebilirsiniz.

Artık o cihazı taklit edebilecek ve web sayfanızı üzerinde test edebileceksiniz.

Sonuç

Cihaz emülatörleri, duyarlı tasarım için çok iyidir. Bu durumda simülasyonun sadece görsel kısım olduğuna dikkat etmek önemlidir. Web tarayıcısı -işletim sistemini değiştirmiyor- bunun için eklentilerden faydalanabilirsiniz.

Kaynak: https://developer.chrome.com/docs/devtools/device-mode/

Bültenime kaydolmayı unutmayın! Twitter’dan takipleşebiliriz ve iletişime geçebilirsiniz.