Bir masaüstü tarayıcısını çok dar bir şekilde daraltmak, size duyarlı bir tasarımın nasıl çalıştığına dair belirsiz bir fikir verebilir, ancak gerçek bir küçük ekranlı cihazın doğru bir temsili değildir. Ve gerçek küçük ekranlı cihazlar bizim burada tasarladığımız şey, tarayıcılarını sıkıştıran diğer meraklı tasarımcılar değil =).
Bu ekran video kaydında iOS simülatörünü açıyoruz (Mac'te XCode ile ücretsiz olarak gelir) ve orada gördüklerimize göre bazı tasarım değişiklikleri yapıyoruz. Deneyimlerime göre simülatör, gerçek cihazda gördüğünüze göre çok doğru. Yine de farklılıklar gördüm - örneğin bellek kullanımı. Bu web sitesinin yayınlanmasının hemen ardından mobil webkit'te çökme görüyordum ve bu simülatörde olmuyordu.
Yaptığımız bir şey, en dar ortam sorgusunda 3D yığılmış kağıt efektini kaldırmaktır. Ayrıca, başlıktaki reklamın mobil cihazlarda yatay kaydırmaya neden olduğunu fark ettik, bu da mobil düzene nasıl yaklaştığımız konusunda istenmeyen bir şey. Neyse ki bunu hemen bulabildik, ancak bazen bu şeylerin izini sürmek zordur ve siz sadece overflow-xvücutta gizlersiniz, ki nihayetinde burada yapıyoruz.
Daha küçük ekran için de bazı yazı tipi boyutlarını ayarlıyoruz.