कोई वेबसाइट मोबाइल पर आम तौर पर तीन में से एक वजह से अलग दिखती है: लेआउट पतली स्क्रीन के हिसाब से ढल रहा है (जो उम्मीद के मुताबिक़ है), फ़ोन को पेज का कोई दूसरा वर्शन मिल रहा है (कैश, डिवाइस डिटेक्शन या प्लगइन), या फ़ोन का ब्राउज़र और उसकी सेटिंग्स उसे अलग तरह से दिखा रही हैं (Safari का इंजन, dark mode, फ़ॉन्ट स्केलिंग)। पहले यह पता करें कि आपके सामने इन तीन में से कौन-सी समस्या है, क्योंकि इनके हल में कुछ भी साझा नहीं है।
पहले इसे डेस्कटॉप पर दोहराएँ
वही URL अपने कंप्यूटर पर मोबाइल व्यू में खोलें: Chrome DevTools का device mode, या Mobile View Extension जैसा मोबाइल व्यू एक्सटेंशन, जो पेज को मोबाइल user agent और फ़ोन के स्क्रीन साइज़ के साथ रीलोड करता है।
- मोबाइल व्यू में भी ग़लत दिखता है? यह लेआउट या कंटेंट की समस्या है। वजह 1–4 से शुरू करें।
- मोबाइल व्यू में सही, लेकिन फ़ोन पर ग़लत? यह डिलीवरी या ब्राउज़र की समस्या है। वजह 5–11 से शुरू करें।
लेआउट और कंटेंट से जुड़ी वजहें
1. viewport meta tag गायब है या ग़लत है
<meta name="viewport" content="width=device-width, initial-scale=1"> के बिना फ़ोन पेज को लगभग 980 px के डेस्कटॉप पेज की तरह बनाते हैं और फिर छोटा कर देते हैं, इसलिए सब कुछ बहुत छोटा दिखता है। तय width=1024 जैसी ग़लत वैल्यू से पेज अजीब तरह से स्केल होता है। देखें viewport meta tag क्या है।
2. कुछ न कुछ स्क्रीन से चौड़ा है
तय चौड़ाई वाला एक भी एलिमेंट (टेबल, embed, लंबा URL, बिना max-width: 100% वाली इमेज) पूरे पेज को साइड में स्क्रॉल करवा देता है, और कुछ ब्राउज़र उसे समाने के लिए ज़ूम-आउट कर देते हैं। DevTools में देखें कि किन एलिमेंट का scrollWidth viewport से बड़ा है।
3. Breakpoints अनचाही चौड़ाई पर लेआउट बदल देते हैं
landscape में आपका फ़ोन आपकी सोच से ज़्यादा चौड़ा हो सकता है, या कोई टैबलेट 768 px वाले breakpoint के डेस्कटॉप वाले हिस्से में पड़ सकता है। डिवाइस की असली चौड़ाई iPhone viewport चार्ट में देखें और अपने breakpoints दोबारा जाँचें।
4. मोबाइल पर कंटेंट छिपा या आगे-पीछे किया गया है
पेज बिल्डर और CSS अक्सर छोटी चौड़ाई पर display: none से सेक्शन छिपा देते हैं या कॉलम का क्रम बदल देते हैं। यह जान-बूझकर किया गया डिज़ाइन है, लेकिन इसका होना भूल जाना आसान है। सिर्फ़ मोबाइल पर दिखने-छिपने वाली सेटिंग्स जाँचें।
डिलीवरी से जुड़ी वजहें: फ़ोन को अलग पेज मिलता है
5. कैश पुराना वर्शन दिखा रहा है
फ़ोन के ब्राउज़र में पुरानी CSS रखी हो सकती है, या आपका CDN या कैशिंग प्लगइन मोबाइल के लिए अलग कैश रखता हो जो साफ़ नहीं हुआ। साइट का कैश और CDN कैश साफ़ करें, फिर फ़ोन पर प्राइवेट टैब में रीलोड करें।
6. डिवाइस डिटेक्शन अलग टेम्पलेट भेजता है
कुछ थीम, प्लगइन और सर्वर user agent देखकर फ़ोन को अलग HTML भेजते हैं। डेस्कटॉप ब्राउज़र की विंडो, चाहे कितनी भी पतली हो, वह वर्शन कभी नहीं देखती। असली मोबाइल user agent भेजने वाला मोबाइल व्यू उसे देख लेगा। user agent कैसे काम करता है, यह user agent switcher क्या है में समझाया गया है।
7. विज्ञापन, A/B टेस्ट और पर्सनलाइज़ेशन
विज्ञापन की जगहें, प्रयोग और लोकेशन के हिसाब से कंटेंट डिवाइस या विज़िट के हिसाब से बदल सकते हैं। लॉग-आउट होकर, प्राइवेट टैब में टेस्ट करें, और अगर आपका टूल अनुमति दे तो प्रयोग बंद करके।
ब्राउज़र और सेटिंग्स से जुड़ी वजहें: फ़ोन पेज को अलग तरह से दिखाता है
8. Safari का इंजन अलग बर्ताव करता है
iPhone के सभी ब्राउज़र ज़्यादातर WebKit इस्तेमाल करते हैं। फ़र्क़ फ़ॉर्म कंट्रोल में, overflow containers के अंदर position: sticky में, सिमटने वाले एड्रेस बार के साथ 100vh में (100dvh इस्तेमाल करें), और नए CSS फ़ीचर में दिखते हैं। Xcode Simulator या असली डिवाइस से iOS Safari में टेस्ट करें; देखें iPhone पर टेस्टिंग।
9. ब्राउज़र dark mode लगा देता है
Samsung Internet जैसे कुछ ब्राउज़र उन पेजों पर ज़बरदस्ती गहरे रंग लगा सकते हैं जो अपनी कलर स्कीम नहीं बताते। पारदर्शी बैकग्राउंड वाले लोगो और कोड में तय किए गए रंग पढ़ने लायक़ नहीं रहते। color-scheme बताएँ और prefers-color-scheme से dark थीम दें, या साफ़ तौर पर हल्के रंग सेट करें।
10. फ़ॉन्ट और टेक्स्ट साइज़ अलग हैं
अगर वेब फ़ॉन्ट लोड न हो, तो फ़ोन अपने सिस्टम फ़ॉन्ट पर लौट जाता है, जिसकी चौड़ाई अलग होती है, इसलिए टेक्स्ट अलग जगहों पर टूटता है। यूज़र अपने ब्राउज़र या सिस्टम की एक्सेसिबिलिटी सेटिंग्स में टेक्स्ट बड़ा भी कर सकते हैं, और मोबाइल ब्राउज़र कभी-कभी landscape में टेक्स्ट अपने-आप बड़ा कर देते हैं। relative units इस्तेमाल करें, टेक्स्ट को अगली लाइन में जाने दें, और अगर अपने-आप बढ़ने से समस्या हो तो text-size-adjust: 100% सेट करें।
11. ब्राउज़र के फ़ीचर पेज बदल देते हैं
कंटेंट ब्लॉकर, डेटा बचाने वाले मोड, reader view और अनुवाद, सब बदल सकते हैं कि विज़िटर क्या देखता है। अगर एक व्यक्ति अजीब लेआउट की शिकायत करता है, तो कुछ भी दोबारा बनाने से पहले पूछें कि वह कौन-सा ब्राउज़र और कौन-से फ़ीचर इस्तेमाल करता है।
जल्दी पहचानने के लिए टेबल
| लक्षण | सबसे संभावित वजह |
|---|---|
| सब कुछ बहुत छोटा, यूज़र को ज़ूम करना पड़ता है | गायब viewport tag (1) |
| पेज साइड में स्क्रॉल होता है | स्क्रीन से चौड़ा एलिमेंट (2) |
| प्रीव्यू में लेआउट ठीक, फ़ोन पर पुराना डिज़ाइन | कैश (5) |
| फ़ोन पर बिल्कुल अलग डिज़ाइन | डिवाइस डिटेक्शन या मोबाइल थीम (6) |
| सिर्फ़ iPhone पर टूटा | Safari/WebKit का फ़र्क़ (8) |
| रंग उलटे या लोगो ग़ायब | ज़बरदस्ती लगा dark mode (9) |
| टेक्स्ट अलग तरह से टूटता है, बटन बाहर निकलते हैं | fallback फ़ॉन्ट या टेक्स्ट स्केलिंग (10) |
अगली बार इससे कैसे बचें
नए पेज लॉन्च के बाद नहीं, बनाते समय ही मोबाइल व्यू में जाँचें, और रिलीज़ के लिए एक छोटी चेकलिस्ट रखें। मोबाइल वेबसाइट टेस्टिंग चेकलिस्ट में ऐसी एक लिस्ट है। WordPress से जुड़े सुधारों के लिए WordPress साइट को मोबाइल फ़्रेंडली कैसे बनाएँ देखें।
अक्सर पूछे जाने वाले सवाल
मेरी साइट Chrome के मोबाइल व्यू से अलग मेरे फ़ोन पर क्यों दिखती है?
Chrome का मोबाइल व्यू Chrome का इंजन और आपके डेस्कटॉप की कैश की गई फ़ाइलें इस्तेमाल करता है। फ़ोन Safari का इंजन इस्तेमाल कर सकता है, उसके पास अलग कैश फ़ाइलें या CDN का मोबाइल कैश हो सकता है, या वह dark mode या टेक्स्ट स्केलिंग लगा सकता है।
मेरी WordPress साइट मोबाइल पर अलग क्यों दिखती है?
सबसे आम वजहें हैं: पेज बिल्डर की सेटिंग्स जो सिर्फ़ डेस्कटॉप साइज़ पर लगाई गईं, कैशिंग प्लगइन जो पुराना मोबाइल कैश दिखाता है, और थीम या प्लगइन जो अलग मोबाइल लेआउट भेजते हैं।
मेरी वेबसाइट मोबाइल पर ज़ूम-आउट क्यों दिखती है?
आम तौर पर viewport meta tag गायब होता है, या कोई एलिमेंट स्क्रीन से चौड़ा होता है और ब्राउज़र उसे समाने के लिए ज़ूम-आउट कर देता है।