एक डेस्कटॉप ब्राउज़र को बहुत कम निचोड़ने से आपको एक अस्पष्ट समझ मिल सकती है कि एक उत्तरदायी डिज़ाइन कैसे काम करता है, लेकिन यह एक वास्तविक छोटे स्क्रीन डिवाइस का सटीक प्रतिनिधित्व नहीं है। और वास्तविक छोटे स्क्रीन डिवाइस वे हैं जो हम यहां के लिए डिज़ाइन कर रहे हैं, न कि अन्य जिज्ञासु डिजाइनर अपने ब्राउज़र को नीचे निचोड़ रहे हैं =)।
इस पेंचकस में हम iOS सिम्युलेटर खोलते हैं (एक मैक पर XCode के साथ मुफ़्त आते हैं) और जो हम वहां देख रहे हैं उसके आधार पर कुछ डिज़ाइन ट्वीक बनाते हैं। मेरे अनुभव में सिम्युलेटर आपको वास्तविक डिवाइस पर जो दिखता है वह बहुत सटीक है। मैंने हालांकि मतभेदों को देखा है - उदाहरण के लिए स्मृति उपयोग। बस इसी वेबसाइट के लॉन्च के बाद मैं मोबाइल वेबकिट पर दुर्घटनाग्रस्त हो रहा था - और यह सिम्युलेटर में नहीं हो रहा था।
एक चीज जो हम करते हैं वह सबसे संकीर्ण मीडिया क्वेरी में 3D स्टैक्ड पेपर प्रभाव को हटा देती है। हम यह भी पता लगाते हैं कि हेडर में विज्ञापन मोबाइल पर कुछ क्षैतिज स्क्रॉल का कारण बन रहा है, एक अवांछनीय चीज है कि हम मोबाइल लेआउट में कैसे आ रहे हैं। सौभाग्य से हम इसे नीचे ट्रैक करने में सक्षम थे, लेकिन कभी-कभी ये चीजें नीचे ट्रैक करने के लिए मायावी होती हैं और आप बस overflow-xशरीर पर छिप जाते हैं, जो हम अंततः यहां करते हैं।
हम छोटे स्क्रीन के लिए भी कुछ फ़ॉन्ट आकार समायोजित करते हैं।