Net olarak herhangi bir yöntemi doğru kabul edemiyoruz. Tarayıcıda yaptığımız geliştirmeler tam olarak gerçek cihazı taklit edemiyor. Emulatörlerden kontrol edilen geliştirmeler daha doğru sonuç verse de kaç emülatörde test edebiliriz ki...
Mecburen tarayıcıyı doğru kabul ediyoruz ama cihazların dpi farklarını da hesap ederek, aslında zihnen çalışan bir emülatör üzerinden geliştirme yapıyoruz. Responsive geliştirme yaparken tarayıcının sunduğu örnek cihazları doğru kabul edemeyiz. Bu yüzden manuel olarak genişliği iyice daraltmak, zoom out yapıp genişliği iyice artırmak gibi denemeler yapıp her duruma uygun kod yazmak gerek.
Çok daha doğru sonuç vermesi için en düşük ekran genişliğine sahip ios ve android sistemli cihazlarda test etmek iyi olabilir. Ama pratikte böyle testler geliştirici için çok zaman alacak, projenin tamamlanma süresini uzatacaktır. Bu yüzden proje en azından ilk başta sadece tarayıcı üzerinden kontroller sağlanarak tamamlanabilir. En sonunda da emülatör testleri yapılıp ona uygun düzeltmeler yapılabilir.

Kendi adıma, projemi geliştirirken sadece tarayıcı üzerinde geliştirmemi yapıyorum. Zaman içinde tecrübe edindiğim için hangi CSS kodunun IOS'taki Safari tarayıcısında farklı davranacağını biliyorum. O CSS koduna alternatif üretemiyorsam mecburen gerçek bir cihaza ya da emülatöre bakıyorum.
HTML yapısını kurarken mümkün mertebe IOS'un Safari'sinin sistemini baz alıyorum çünkü çok katı kurallara sahip. Mesela bir elementi position:fixed ile en üst düzeyde göstermem gerekiyorsa, o elementi DOM'da da en üst düzeyde tutmaya çalışıyorum. Çünkü Chrome tarayıcısı geliştirici dostu bir yaklaşımla benim stil yazarken ne kastettiğimi anlayıp ona uygun bir görünümü render edebiliyor ama Safari geliştiriciden net olmasını bekliyor.
Özellikle yeni CSS komutlarını kullanmaktan kaçınıyorum ama eğer kullanmam çok yerinde olacaksa mecburen tarayıcı farklılıklarını gözeterek kullanmam gerekiyor.

Verdiğin örnekte bir yükseklik problemi görünüyor. IPhone bu modelinde -utanmasa- kare ekran kullanacakmış da yine de yüksekliğe biraz daha pay vermiş sağ olsun. Bu daracık alanda güzel bir tasarım çıkarmak zor. Ama ille de buraya özgü de bir çalışma yapılması gerekecekse mecburen media query'leriyle min-height konrolüne göre stilleri overload etmek gerek. Belki header'ın height değerinden kısmak, başlığın puntosunu küçültmek, kutuların tasarımlarını daha küçük bir yapıda sunmak...
Ama işte bunun da bir sonu yok. Sadece ekranın width değeri olsa neyse de ekranın height değeri de devreye girince 4 kombinasyon çıkıyor, işler iyice birbirine geçiyor. Zaman da önemli bir faktör olduğundan en doğrusu projeyi sadece tarayıcı kontrolleri yaparak sürdürmek ve sadece mobil cihazlarda sorun olacağı çok belli stiller için mobil cihazda kontroller yapmak gerek. Sonrasında proje tamamlanınca kullanıcı dönüşlerine göre açıklar kapatılabilir.