İçerik Ekrandan Geniş Hatası ve Çözümü
İçerik, ekrandan geniş isimli uyarı mesajı google search console üzerinde mobil kullanılabilirlik alanında yer alan hatalar arasında yer alır.
İçerik Ekrandan Geniş Hatası, bir web sayfasının içeriğinin, sayfanın görüntülenebildiği ekrandan daha geniş olması durumunda oluşan bir hatadır. Bu hata, genellikle sayfanın içeriğinin yanlışlıkla çok geniş bir boyuta ayarlanması veya sayfanın görüntülendiği cihazın ekranının küçük olması nedeniyle oluşur. Sayfanın veya uygulamanın CSS veya JavaScript kodunda bir hata olduğunda oluşur. Bazı durumlarda ise sayfada yer alan kodlar botlar tarafından taranamadığı için bu hata mesajı ile karşılaşılır.
İçerik Ekrandan Geniş Hatası Çözümü
CSS kodu kontrolü
CSS kodu görünümü ve düzeni kontrol eder. CSS kodunda bir hata varsa, bu, sayfanın veya uygulamanın içeriğinin yanlış boyutlandırılmasına neden olabilir. CSS kodunu kontrol ederek hatayı bulabilir ve düzeltebilirsiniz.
JavaScript kodu kontrolü
JavaScript kodu, sayfanın veya uygulamanın davranışını kontrol eder. JavaScript kodunda bir hata varsa, bu, sayfanın veya uygulamanın içeriğinin yanlış görüntülenmesine neden olabilir.
HTML kodların kontrolü
Web sayfasının HTML kodunu kontrol edin. HTML, web sayfalarının yapısını kontrol etmek için kullanılan bir kodlama dilidir. Web sayfasının HTML kodunda bir hata varsa, bu içerik ekrandan geniş hatasına neden olabilir. HTML kodunu kontrol ederek hatayı bulabilir ve düzeltebilirsiniz.
Sayfa boyutunu değiştirin
Ekran, sayfanın içeriğini görüntülemeye yetecek kadar geniş mi? Eğer değilse, daha büyük bir ekrana sahip bir cihaz kullanın. Boyutu değiştirerek içeriğin ekrana sığmasını sağlayabilirsiniz.
Ekran ve görsel boyutu için aşağıdaki kodlardan ve google tarafından yazılan dokümandan yararlanabilirsiniz.
https://web.dev/responsive-web-design-basics/?sjid=13298227591245083674-EU#size-content
Boyutunu ayarlamak için CSS kodunda aşağıdakileri kullanın:
body {
max-width: 960px;
margin: 0 auto;
}
İçeriği sınırlamak için aşağıdaki JavaScript kodunu kullanın:
const element = document.querySelector(“.container”);
element.style.maxWidth = “960px”;
Hatanın Kontrol Edilmesi
1- Web sayfanızı farklı tarayıcılarda ve farklı ekran boyutlarında test edin. Bu, içerik ekrandan geniş hatasının herhangi bir özel tarayıcı veya ekran boyutunda ortaya çıkıp çıkmadığını belirlemenize yardımcı olacaktır. Bunu yapmak için, tarayıcı ayarlarını kullanarak veya inceleme bölümünü kullanarak ekran boyutunu değiştirebilir veya ekranınızın çözünürlüğünü değiştirebilirsiniz.
2- Web sayfanızı HTML ve CSS kodlarını kullanarak kontrol edin. Bu, hatayı daha hızlı bulmanıza yardımcı olacaktır.
Hatanın büyüteç simgesine tıklayarak -> “Taranan Sayfayı Göster” -> Ekran Görüntüsü -> “Canlı url test et” butonuna tıklayarak da kontrol edebilirsiniz. Eğer test sonucu veri bulunamıyorsa, sayfanızda yeterince içerik olmadığından dolayı nesnelerde kayma yaşanmış olabilir.
3- Google search console üzerinden sayfayı canlı olarak test edin. Bunun için URL’yi üstte yer alan arama alanına yapıştırın ve “canlı url’yi test et” butonuna basın. Ardından test edilen sayfayı göster yazısına tıklayın. Bu alandan ise ekran görüntüsü alanını ve daha fazla bilgi alanında yer alan sayfa kaynakları alanının inceleyin. Bazı durumlarda sayfa kaynağı yüklenemediği için bu hata mesajı ile karşılaşılabiliyor. Hangi kaynakların taranmadığını ve neden taranmadığını inceleyerek sorunu çözün.
Diğer Mobil Uyumluluk Sorunları ve Çözümleri
