Desktop से WordPress Website को मोबाइल Version में कैसे देखे

हाल के रिपोर्ट के अनुसार Google में Search किये जाने वाले Query के 50% या उससे भी ज्यादा Mobile से किया जाता है, इसलिए आपका ब्लॉग या वेबसाइट Mobile Friendly होना बहुत ही जरुरी है |

पर आप तो अपना वेबसाइट Desktop पर बनाते है फिर Mobile के लिए उसे कैसे Test किया जाए ?

तो आज हम आपको विभिन्न प्रकार के तरीको के बारे में बताने जा रहे है जिसके जरिये आप अपने वेबसाइट की “Responsiveness” को जांच सकते है |

सबसे पहला तरीका ये है जो की बहुत ही साधारण है आप अपने Mobile में वेबसाइट को Open करके देख लीजिये जो की जाहिर सी बात है |

या फिर आप Browser के Window को Resize करके भी देख सकते है परन्तु इनके अलावा हम आपको बहुत सारे तरीकों के बारे में बताने जा रहे है |

WordPress Customizer

WordPress में यह बहुत ही अच्छा सुविधा दिया गया है जिसके जरिये आप अपने वेबसाइट को Design करते समय अलग-अलग Device जैसे की Phone,Tablet और Desktop के लिए जांच सकते है |
इसे करना बहुत ही आसान है –

Step 1 :- WordPress के डैशबोर्ड में लॉग इन कर लीजिये उसके बाद Appearence (दिखावट) सेक्शन में Customize पर क्लिक कीजिये |

customize-option-in-wordpress.jpg

 

Step 2 :-  सबसे निचे एक Panel में आपको तिन तरह के Icon दिखाई देंगे जिसकी मदद से आप अलग अलग Device के लिए अपने वेबसाइट को Simulate कर सकते है |

simulating-website-on-phone-in-wordpress-customizer.jpg

 

तो इस तरह आप आसानी से WordPress Customizer का इस्तेमाल करके अपने वेबसाइट को किसी भी Device के लिए Simulate कर सकते है |

Page Builder

यदि आप किसी Page Builder का इस्तेमाल करते है तो वहां पर भी “Responsiveness” जांचने के लिए आप्शन रहता है |

जैसे की  Elementor Page Builder में आप देख सकते है |

सबसे पहले जिस भी Page को Edit करना हो उसे Elementor में Open कर लीजिये उसके बाद आपको निचे में एक Device Icon दिखेगा |

responsiveness-check-for-mobile-in-elementor.jpg
इस Icon के मदद से आप किसी भी Device को Simulate कर सकते है |

Chrome Developer Tool

 

इस तरीका से आप सिर्फ अपनी ही वेबसाइट नहीं बल्कि किसी भी वेबसाइट के बारे में बहुत सारी जानकारी इक्कठा कर सकते है !

आपको बस वेबसाइट Chrome Browser में ओपन करना है उसके बाद Developer Option में जाना है |

developer-option-in-chrome.jpg

आप Chrome के Menu में  More Tools के अन्दर भी Developer Option देख सकते है |

Developer Option में जाने के लिए आप Shortcut का भी इस्तेमाल कर सकते है –
 Chrome – Ctrl+Shift+I
Firefox,Edge –  Ctrl+Shift+M

different-devices-in-chrome-developers-tools.jpg

 

अब आपके सामने एक नया Screen खुल जायेगा जहाँ पर आप अलग अलग तरह की Setting को बदल कर किसी भी वेबसाइट को Simulate कर सकते है |

adding-custom-device-in-chrome-developer-tools.jpg
आप चाहे तो कोई Custom Device भी Add कर सकते है और Connection Speed को भी बदल सकते है |

Chrome Extension

यदि आपको ये सब समझ में नहीं आ रहा है तो आप Chrome Extension का इस्तेमाल कर सकते है जो की ठीक वही काम करता है |

viewport-resizer-chrome-extension.jpg
इसके लिए आपको बस ViewPort Resizer  Chrome Extension Install करना है उसके बाद आप आसानी से ViewPort बदल सकते है |

यह भी पढ़े :- WordPress के Comment Box में reCAPTCHA Code कैसे Insert करे

Fun Fact : आपका एक समस्या कई लोगो का समस्या हो सकता है, इसलिए निचे Comment जरुर करे ?

sharing-is-caring.jpeg
यदि आपको ये पोस्ट पसंद आया हो तो इसे अपने दोस्तों के साथ जरुर शेयर करे और आप हमारे Facebook Page को भी Like कर सकते है |

नए पोस्ट को सीधे Inbox में पाने के लिए Newsletter जरुर Subscribe करे |

Leave a Reply