Ücretsiz Duyarlı Tasarım Test AracıSayfanızı tüm ekran boyutlarında aynı anda görün.

Bir web sitesi adresi girin veya HTML’nizi yapıştırın; gerçek telefon, tablet, dizüstü ve masaüstü ekranları boyutundaki çerçevelerde, yan yana ya da tek tek görün.
Bir çerçeveyi istediğiniz genişliğe sürükleyin, döndürün, yaygın kırılma noktaları arasında geçiş yapın, yana taşan içeriği bulun ve HTML’nizin ekran görüntülerini kaydedin.

40+ ekran boyutuYan yana görünümTaşma bulucu

Kayıt gerekmez Proxy yok Filigran yok

Test aracı yükleniyor…

Yapıştırılan HTML tarayıcınızda kalır. Web siteleri doğrudan kendi sunucularından yüklenir.

ÜÇ BASİT ADIM

Duyarlı tasarım nasıl test edilir

Sayfanızı ekleyin

Bir web sitesi adresi yazın ya da HTML’ye geçip kodunuzu yapıştırın veya bir .html dosyası açın. Örnek sayfa nasıl çalıştığını gösterir.

Ekranları seçin

Tek bir cihaza bakıp kenarlarını sürükleyin ya da bir telefonu, tableti, dizüstünü ve masaüstünü yan yana koyun. Herhangi birini döndürün.

Düzeltin ve kaydedin

Ekrandan geniş içerik uyarılarını okuyun, HTML’nizi düzenleyip her çerçevenin güncellenmesini izleyin, ardından ekran görüntülerini kaydedin.

Her boyutta dayanan düzenler için ipuçları

320 pikselden başlayın

Kullanımdaki en dar telefonlar 320 ila 360 CSS piksel genişliğindedir. Düzen orada dayanıyorsa neredeyse her yerde dayanır.

Sadece cihaz seçmeyin, sürükleyin

Kırılma noktaları cihazlar arasında da bozulur. Çerçeveyi darda genişe yavaşça sürükleyin ve bir şeyin zıpladığı veya üst üste bindiği anı yakalayın.

Viewport etiketini asla unutmayın

WaveSpeed AI

Düzenden görsellere

Sayfa her boyutta çalıştığında, ihtiyaç duyduğu görselleri ve klipleri WaveSpeed AI ile oluşturun.

Üretmeye başla 1.000+ AI Modelini Keşfedin

1.000+ yapay zeka modeli
Görsel, video ve 3D
Kullandıkça öde

Uygun yeni hesaplara $1 ücretsiz kredi. Kart gerekmez. Üreticiler için ayrı hesap ve kredi gereksinimleri vardır. Responsive test aracı ücretsizdir.

Responsive test aracı SSS

Bu duyarlı tasarım test aracı ücretsiz mi?

Evet. Hesap yok, cihaz veya sayfa sınırı yok, ekran görüntülerinde filigran yok ve kurulacak bir şey yok: tarayıcınızda çalışır.

Web sitemi farklı ekran boyutlarında nasıl test ederim?

Sitenizin adresini girin veya HTML’nizi yapıştırın, ardından 40’tan fazla telefon, tablet, dizüstü ve masaüstü boyutu arasından tek tek veya yan yana seçin. Bir çerçeveyi istediğiniz genişliğe sürükleyin, döndürün veya yaygın kırılma noktalarına atlayın.

Cihaz boyutları ne kadar doğru?

Her çerçeve, o ekranın CSS piksel cinsinden tam genişlik ve yüksekliğinde bir tarayıcı viewport’udur; böylece media query’leriniz, düzenleriniz ve kırılma noktalarınız o cihazda olduğu gibi tepki verir.

Kendi HTML’imi veya yerel bir siteyi test edebilir miyim?

Evet. HTML’nizi yapıştırın veya bir .html dosyası açarak her boyutta önizleyin ve canlı düzenleyin. Web siteleri https üzerinden yüklenir; yerel bir geliştirme sunucusu için https tüneli kullanın veya derlenmiş HTML’yi yapıştırın.

Düzen sorunlarını buluyor mu?

Evet. HTML’nizde, telefonlarda yana kaydırmanın olağan nedeni olan ekrandan geniş öğeleri işaretler ve viewport meta etiketi eksikse uyarır.

Ekran görüntüsü kaydedebilir miyim?

Evet, yapıştırılan HTML için: görünen alanı veya tam sayfayı cihazın piksel oranında PNG olarak kaydedin; 3x’te 393 piksel genişliğindeki bir çerçeve 1179 piksel genişliğinde bir görsel verir.

Piksel oranı etiketi ne anlama geliyor?

Telefonlar her CSS pikseline iki ila dört fiziksel piksel sığdırır. Etiket bu oranı gösterir ve yapıştırılan HTML’nin ekran görüntüleri bu oranda kaydedilir; böylece gerçek ekranın netliğiyle eşleşir.

Sayfam sizin sunucularınızdan geçiyor mu?

Hayır. Bir web sitesi, aradaki bir proxy olmadan, tarayıcınız tarafından doğrudan kendi sunucusundan çerçevelerin içine yüklenir. Yapıştırılan HTML ve ekran görüntüleri tarayıcınızda kalır; son sayfanız ve ayarlarınız bu tarayıcının depolama alanında saklanır.

Bir web sitesi neden boş kalıyor?

Bazı siteler başka sayfaların içinde gösterilmemeyi tercih eder. Sitenin başlıklarını kontrol etmek için "Neden boş?" bölümünü açın veya bunun yerine sayfanın HTML’sini yapıştırın.

Tüm Ücretsiz Araçlar