Responsive Tasarım Örneği

Bu örnek, hem masaüstü hem de mobil cihazlarda doğru şekilde görüntülenen responsive bir tasarımdır. Metin boyutları viewport genişliğine göre otomatik olarak ayarlanır.

Android cihazlarda iki parmakla zoom yapıldığında bile metinler taşmayacak şekilde tasarlanmıştır. Bunun için:

  • Viewport meta tag'i doğru ayarlandı
  • Metin boyutları vw birimiyle belirlendi
  • İçerik konteynırına uygun padding eklendi
  • Kelime kaydırma özellikleri aktif edildi

Bu sayfayı test etmek için telefonunuzda iki parmakla zoom yapmayı deneyebilirsiniz. Metinlerin taşmadığını ve ekrana sığdığını göreceksiniz. Bu sayfayı test etmek için telefonunuzda iki parmakla zoom yapmayı deneyebilirsiniz. Metinlerin taşmadığını ve ekrana sığdığını göreceksiniz.

Bu sayfayı test etmek için telefonunuzda iki parmakla zoom yapmayı deneyebilirsiniz. Metinlerin taşmadığını ve ekrana sığdığını göreceksiniz. Bu sayfayı test etmek için telefonunuzda iki parmakla zoom yapmayı deneyebilirsiniz. Metinlerin taşmadığını ve ekrana sığdığını göreceksiniz.