Ekran Çözünürlüğü Simülatörü

Sayfanız başka bir ekranda nasıl görünüyor?

Sitenizi bilgisayarda tasarlarsınız, oysa ziyaretçilerinizin çoğu onu telefondan açar. Jood'un Ekran Çözünürlüğü Simülatörü, herhangi bir sayfayı seçtiğiniz ekran genişliğinde gösterir: 360 piksellik bir Android telefondan 1920 piksellik bir masaüstüne kadar. Sütunların, menülerin ve resimlerin o cihazdaki ziyaretçiye nasıl göründüğünü görürsünüz.

Nasıl kullanılır

1. Adresi "Sayfa URL’si" kutusuna yapıştırın.
2. "Ekran Çözünürlüğü" listesinden bir cihaz seçin ya da "Başka boyut" seçip genişliği ve yüksekliği piksel olarak yazın.
3. "Şimdi Başla" düğmesine basın. Sayfa gerçek genişliğinde çizilir, sonra küçültme yüzdesiyle birlikte ekranınıza sığacak şekilde küçültülür.

Önizlemedeki sayfa canlıdır: kaydırabilir, bağlantılarına tıklayabilirsiniz.

Neden 1170 değil de 390?

Bir iPhone ekranının genişliği binden fazla pikseldir, ama tarayıcı onu 390 piksel genişliğindeymiş gibi kullanır ve metin keskin kalsın diye bu piksellerin her birini birkaç noktayla çizer. Sitenizin gördüğü bu mantıksal boyutlardır ve duyarlı tasarım kuralları bunlara göre kurulur. Liste de bu yüzden onları kullanır.

Çerçevede gösterilmeyi reddeden siteler

Önizleme sayfayı bir çerçeve (iframe) içinde gösterir. Google, bankalar ve sosyal ağlar gibi pek çok site güvenlik nedeniyle buna X-Frame-Options ya da frame-ancestors başlığıyla izin vermez. Araç önce sayfanın başlıklarını okur; bu yasağı bulursa boş bir kutu göstermek yerine size söyler ve "Bu boyutta bir pencerede aç" düğmesini sunar. Bilgisayarda bu düğme sayfayı seçtiğiniz genişlik ve yükseklikte ayrı bir pencerede açar.

Önizlemenin sınırları

• Yalnızca sayfa genişliğini değiştirir. Site telefonda olduğunuzu bilmez; cihaz türüne göre mobil sürüm gönderiyorsa onu burada göremezsiniz.
• Dokunmatiği ve piksel yoğunluğunu taklit etmez, bu yüzden metin gerçek telefondakinden daha net ya da daha bulanık görünebilir.
• Kesin kontrol için Chrome'un geliştirici araçlarını F12 ile, ardından cihaz modunu Ctrl+Shift+M ile açın ve yayınlamadan önce gerçek bir telefonda deneyin.

Denemeye değer boyutlar

En azından küçük telefonlar için 360, iPhone için 390, tabletler için 768 ve yaygın dizüstüler için 1366 deneyin. Tasarımlar çoğunlukla bu eşiklerde bozulur: düğmeye dönüşmeyen bir menü, ekrandan taşan bir tablo, sayfadan geniş bir resim.

Tasarım düzgün olunca sayfanızı arama motorları açısından Kapsamlı Web Sitesi SEO Denetimi ile kontrol edin.