common.you_need_to_be_loggedin_to_add_tool_in_favorites
Ekran Çözünürlüğü Simülatörü Herhangi Bir Web Sayfasını Önizleyin
Canlı web sitesi önizlemesini herhangi bir ekrana uyacak şekilde özelleştirin.
Popüler bir cihaz seçin, yönünü değiştirin veya tam bir piksel boyutu belirleyin. Seçiminize göre boyutlandırılmış, güvenli bir pencere açacağız, böylece duyarlı düzenler üzerinde hızlıca yineleme yapabilirsiniz.
Simülasyon özeti
- Görünüm alanı genişliği
- Görünüm yüksekliği
- En boy oranı
- Önceden ayarlanmış
Ölçeklendirilmiş görüntü alanı önizlemesi
Görsel çerçeve, en boy oranınızı yansıtır. Bu boyutta canlı siteyle etkileşim kurmak için önizleme penceresini açın.
Kopyalamaya hazır CSS yardımcı fonksiyonları
Duyarlı tasarım kontrol listesi
- Bu aracı tarayıcınızın geliştirici araçlarıyla birlikte kullanarak kırılma noktalarını doğrulayın; tutarlı kalite kontrolü için aynı piksel genişliklerini hedefleyin.
- Mobil düzenler için her iki yönlendirmeyi de test edin; simülatör genişlik ve yüksekliği anında değiştirir.
- Paydaşlar veya sürüm notları için kullanıcı arayüzü durumlarını belgelemek amacıyla açılır pencereden ekran görüntüleri yakalayın.
İçindekiler Tablosu
Bir sayfanın telefonlarda, tabletlerde, dizüstü bilgisayarlarda ve ultra geniş monitörlerde saniyeler içinde nasıl göründüğünü görün. Ekran Çözünürlüğü Simülatörü, hızlı ve uyarlanabilir bir test aracı olarak hizmet vermektedir. Ayrıca görüntü pencerelerini kontrol etmek için de iyi çalışıyor. Bir URL yapıştırın, bir boyut seçin ve güvenilir bir web sitesi önizleme aracıyla anında önizleme yapın.
Farklı Boyutlarda Her Sayfayı Önİzle
Ekibinize lansman öncesi düzenleri hızlıca doğrulamak için bir yol verin. Bir URL yapıştırabilir, bir ön ayar seçebilir veya özel boyutlar girebilirsiniz. Bu, siteyi farklı boyutlarda test etmenize yardımcı olur. Sorunları cihaz laboratuvarı veya geliştirici araçlarına ihtiyaç duymadan erken bulabilirsiniz.
Başlamak için bir URL girin
Canlı bir bağlantı, sahneleme veya paylaşma bağlantısı kullanın. Bu şekilde, fontlar, scriptler, analitikler ve içerik tam olarak kullanıcıların gördüğü şekilde gösterilir. Bu hem mobil önizlemeler hem de masaüstü kontroller için önemlidir.
Bir ön ayar seçin veya özel boyutlar için ayarlanabilir gövde
Yaygın mobil, tablet ve masaüstü boyutları arasında geçiş yapın. Ayrıca tasarım özellikleri ve veri istisnalarına uymak için belirli bir genişlik ve yükseklik de girebilirsiniz. Bu, piksel kritik sayfalar için web sayfası boyutu testeri olarak da kullanılır.
Portre veya Manzarayı döndür ve Yeni Sekmede Aç
Tablet ve telefonun kenar durumlarını ortaya çıkarmak için çevirme yönü kullanın. Ekran görüntülerini paylaşmak ve hızlı bir onay almak için Önizlemeyi yeni bir sekmede açın.
Neden Ekran Çözünürlüğü Simülatörü Kullanmak Gerekir
Ana içeriği üst tutun
Kahramanın, başlığın ve birincil CTA'nın 390 ila 414 piksel gibi daha küçük genişliklerde görünür kalmasını sağla. Önemli işlemleri gizlerseniz, başlatmadan önce boşlukları değiştirebilir, metni kısaltabilir veya bölümleri boyutunu değiştirebilirsiniz.
Navigasyon, Gridler ve Formları Doğrulama
Hamburger menülerini, yapışkan başlıkları ve tuval dışı panelleri stres testi yapın. Kart ızgaralarında garip düzen değişimleri olup olmadığını kontrol edin ve formların dokunmatik ekranlarda okunabilir ve tartışılabilir kaldığından emin olun.
Fırlatmadan önce yanıt veren kırılma noktalarını onaylayın
Bileşenlerin nerede kaydığını görmek için ortak genişlikleri tara. Eğer 360 ve 414'te kalıyorsa ama 390'da kırılırsa, bir kırılma noktası ekleyin. Tasarımın daha iyi çalışması için minimum ve maksimum genişlikleri de ayarlayabilirsiniz.
Ekran Çözünürlüğü Simülatörü Nasıl Çalışır
Popüler Telefon, Tablet ve Masaüstü Ön Ayarlar
Çoğu senaryoyu hızlı bir şekilde kapatın ve gözel genişliklerle
320, 360, 390, 414, 768, 1024, 1280, 1440, 1920, 2560, 3840
Piksel Mükemmelliği Yüksekliğe Göre Özel Genişlik
Açılış sayfaları, gösterge panelleri ve uygulama benzeri düzenler için tam boyutları girin. Hassas bir masaüstü çözünürlük testerine ihtiyacınız olduğunda idealdir.
Viewport vs Ekran Çözünürlüğü
Viewport, CSS'de farklı cihazlarda şeylerin nasıl göründüğünü kontrol eden alan. Ekran çözünürlüğü, cihazın piksel ızgarasını ifade eder. Çözümü arka plan olarak düşünün. Önce görüntü penceresine odaklanın.
Ekran Çözünürlüğü Simülatörü Nasıl Kullanılır
URL'yi yapıştır, sonra Pick Size, ardından Önizleme
. Küçükten büyüğe doğru çalış. Mobilden tablete, masaüstünden, oradan da büyük masaüstünden. Bu dizis stres noktalarını erken ortaya çıkarır ve yeniden çalışmayı azaltır.
Sorunları Tespit Et ve Ekran Görüntüsü Yakalama
Başlığı, kahraman, birincil CTA, ürün kartları, formlar ve alt sayfayı tara. 390 piksel aralığında menü wrap gibi problemli genişlikleri yakalayın ve daha hızlı dönüş için kısa düzeltme notları ekleyin.
Düzgün Düzenler İçin Pro İpuçları
• Menü etiketlerini kısa tutun ve ana eylemi öncelikle yapın.
• Yetimlerden kaçınmak için makul aralıklı esnek ızgaralar kullanın
• Medya konteynerlerini tanımlamak ve düzen değişimlerini önlemek için duyarlı görüntüler kullanmak
Ekran Çözünürlüğü Simülatörü Düzeltmeleri ve Hızlı Kazanımlar
Menü Örtüşmelerini ve Yapışkan Başlıkları Düzeltin
Etiketleri kısaltın, ikincil bağlantıları taşmaya taşıyın, dolguları azaltın ve içeriğin gizlenmemesi için yapışkan ofsetleri doğrulayın.
Tablet Genişliğinde Kart Sarımayı Geliştirin
768 ila 1024 arası px aralığı tahmin edilebilir aralıklarla iki sabit sütuna geçer. Neredeyse üç sütundan kaçının, bu sütunlar yırtıklı şekilde örtülmeye zorlayır.
Duyarlı Kaynaklarla Daha Keskin Görüntüler
srcset ve boyutlar gibi duyarlı görüntüler sağlayın ve konteyner boyutlarını tanımlayın. Hem mobil hem de masaüstü için net görseller elde ederken düzeni stabil tutuyorsunuz.
Bu araçlarla daha da optimize edin
Google SERP Simulator: yayınlamadan önce başlık ve meta önizleme.
Örümcek Simülatörü: tarayıcıların sayfanızda ne yakalayacağını bulun
Aç Grafik Kontrolü: paylaşma başlığı, açıklama ve görseli doğrulayın.
Kullanıcı Ajanı Dizisi Görüntüleyici: tespit edilen tarayıcı ve cihaz detaylarını doğrulayın.
Ekran Çözünürlüğünü Değiştir: Demolar veya ekran görüntüleri için kendi ekranınızı değiştirin.
Kontrolcü Titreşim Tester'ı: tarayıcı gamepad algılama ve gırtıldamasında doğrula.
API Dokümantasyonu Yakında Yayınlanacak
Documentation for this tool is being prepared. Please check back later or visit our full API documentation.
Sıkça Sorulan Sorular
-
Düzen kontrollerini hızlandırıyor ve en çok tepki veren sorunları yakalıyor. Kaydırma davranışı, render ve giriş gibi donanım tuhaflıkları için, hedef cihazlarda ve tarayıcılarda nokta kontroller yapın.
-
evet. Tasarım sisteminize veya analitik istisnalarınıza uygun kesin genişlik ve yükseklikleri girin. Katlanabilir açılış sayfaları için harika.
-
Düzen esas olarak genişliğe bağlıdır, ancak yoğunluk ayrıca görüntü keskinliğini ve bazı medya sorgularını da etkiler. Görsellerin tutarlı olduğundan emin olmak için bir yoğun genişlikte ve bir standart genişlikte kontrol edin.