Merhaba,
Bir sayfa geniş ekranda düzgün görünüp telefonda yana doğru uzayabiliyor. İlk çözüm olarak her şeyi küçültmek cazip, ama yazı okunmaz hale geldiyse asıl sorun çözülmüş olmuyor. Önce hangi parçanın ekranı genişlettiğini bulmak gerekiyor.
Sabit genişlik verilmiş bir kutu, büyük görsel veya uzun bir tablo başlangıç için bakılacak yerler.
Sayfanın tamamını değil, taşan öğeyi tespit et. Tarayıcının geliştirici araçlarında dar bir ekran açıp öğeleri sırayla incelemek burada işe yarar.
İçerik görselleri için şu küçük örnek yardımcı olabilir. Seçici, yalnızca bu amaçla class verdiğin görselleri etkiler; bütün site görsellerine gelişigüzel kural eklememek daha kontrollü olur.
Kod:
.icerik-gorseli {
max-width: 100%;
height: auto;
}
Bu kural görselin kapsayıcısından genişlemesini önlemeye yardımcı olur. Fakat kapsayıcının kendisi zaten ekrandan büyükse tek başına yeterli değildir. Aynı şekilde uzun tabloyu okunamayacak kadar sıkıştırmak yerine tabloya özel bir çözüm düşünmek gerekir.
Yatay taşmayı gizlemek, taşmanın nedenini düzeltmek değildir. overflow-x: hidden bazı durumlarda içeriği sadece keser. Form düğmesinin veya tablonun son sütununun kaybolmasını istemiyorsan sonucun gerçekten kullanılabilir olup olmadığına bakmalısın.
Responsive yaklaşım
MDN'nin ilgili rehberinde anlatılıyor. Küçük bir düzeltmeden sonra hem dar hem geniş ekrana tekrar bakmak yeterli; sırf bir kutu taştı diye bütün tasarımı baştan yapmak gerekmiyor.
Masaüstünde Düzgün, Telefonda Taşan Sayfaya Nereden Bakılır?
