Önizleme ekranı boş ve web sitesi görüntülenmiyor. Neden?

Hedef web sitesi bir güvenlik önlemi olarak 'X-Frame-Options' veya 'Content-Security-Policy' ayarladıysa ve diğer sitelerden iframe yerleştirmesine izin vermiyorsa, tarayıcı görüntülemeyi engelleyecektir.

Yerel bir ortam URL'sini (localhost) önizleyebilir miyim?

Evet, yapabilirsiniz. Bilgisayarınızda çalışan yerel bir sunucunuz varsa, test etmek için http://localhost:3000 gibi bir URL girebilirsiniz.

📱

responsive previewer,

Duyarlı Tasarım Önizleyici

Sadece bir URL girerek 12 cihaz genişliğinde
duyarlı tasarımları önizleyin.

📱

12 Cihaz Destekleniyor

iPhone'lardan PC'lere kadar kapsar

🔄

Ölçek ve Yön

Kolayca uzaklaştırın ve döndürün

🔒️

Sunucu İşlemi Yok

Güvenli istemci tarafı işleme

* Site yüklenmezse, iframe yerleştirmesini kısıtlıyor olabilir.

Ölçek:

Yön:

Cihaz:

Önizlemeye başlamak için bir URL girin

Bunu da beğenebilirsiniz

⏳

Cron Oluşturucu

🧩

JSON to TS Interface

🔒

HTTP Başlık Denetleyici

about,

Duyarlı Tasarım Önizleyici Hakkında

Duyarlı Tasarım Önizleyici, tek bir URL'nin çeşitli ekran boyutlarında (akıllı telefonlar, tabletler ve masaüstü bilgisayarlar) nasıl göründüğünü doğrudan tarayıcınızda hızlı bir şekilde kontrol etmenizi sağlayan ücretsiz bir web geliştirme destek aracıdır. Birden fazla fiziksel cihazınız olmasa bile, iPhone, iPad ve PC'ler gibi standart cihaz çözünürlüklerini kullanarak tasarım bozulmalarını ve düzen davranışını test edebilirsiniz.

how to,

Nasıl Kullanılır

ADIM 1

URL Girin

Önizlemek istediğiniz web sitesinin URL'sini giriş kutusuna yapıştırın ve "Önizle" düğmesine tıklayın.

ADIM 2

Cihaz Seçin

Mobil, Tablet ve Masaüstü sekmeleri arasında geçiş yapın ve kontrol etmek istediğiniz belirli cihazı (örn. iPhone 15 Pro Max) seçin.

ADIM 3

Yönü ve Ölçeği Ayarlayın

Dikey ve Yatay modlar arasında geçiş yapın. Ekran sığmazsa, tüm görünümü görmek için ölçeği (örn. %50, %75) ayarlayın.

glossary,

Sözlük

Duyarlı Web Tasarımı (Responsive Web Design): Kullanılan cihazın ekran boyutuna ve yönüne bağlı olarak bir web sitesinin görünümünde dinamik değişiklikler yaratan bir web geliştirme yaklaşımı.
Görüş Alanı (Viewport): Bir web sayfasının kullanıcının görebildiği alanı. Mobil cihazlarda, <meta name="viewport" ...> etiketi ekran genişliğini ve ölçeklemeyi kontrol etmek için kullanılır.
Medya Sorguları (Media Queries): İçerik oluşturmanın ekran çözünürlüğü, genişliği veya yüksekliği gibi koşullara uyum sağlamasına izin veren bir CSS3 özelliği.

faq,

Sıkça Sorulan Sorular

S.Önizleme ekranı boş ve web sitesi görüntülenmiyor. Neden?: Hedef web sitesi bir güvenlik önlemi olarak 'X-Frame-Options' veya 'Content-Security-Policy' ayarladıysa ve diğer sitelerden iframe yerleştirmesine izin vermiyorsa, tarayıcı görüntülemeyi engelleyecektir.
S.Yerel bir ortam URL'sini (localhost) önizleyebilir miyim?: Evet, yapabilirsiniz. Bilgisayarınızda çalışan yerel bir sunucunuz varsa, test etmek için http://localhost:3000 gibi bir URL girebilirsiniz.

use cases,

Kullanım Durumları

📱

Web geliştirme sırasında kontrol etme

Yeni oluşturulan web sayfalarının akıllı telefonlarda veya PC'lerde nasıl göründüğünü hızlıca test edin ve üretim sürecinde herhangi bir düzen bozulmasını tespit edin.

🚀