Kisi website ka mobile version PC Chrome mein dekhna ho — ya developer hain aur mobile layout test karna ho — Chrome ka built-in Device Toolbar feature bilkul perfect hai. Koi extension install nahi karna, 2 clicks mein mobile view aa jaata hai. Is guide mein complete walkthrough hai.
Short Answer: PC Chrome mein mobile website dekhne ke liye: Koi bhi website khuloo > F12 dabao (DevTools khulegaa) > upar toolbar mein phone/tablet icon tap karo (Device Toggle — Ctrl+Shift+M) > mobile view activate ho jaayega. Device dropdown se specific phone choose karo (iPhone, Galaxy, Pixel) aur exact screen size simulate karo.
Step-by-Step: Chrome pe Mobile View Enable Karna
- Chrome mein woh website khuloo jo mobile view mein dekhni hai.
- F12 press karo (ya Right-click > “Inspect”) — DevTools panel khulegaa.
- DevTools mein upar phone/tablet icon dhundho (Device Toggle Toolbar).
- Ya shortcut: Ctrl + Shift + M (Windows) / Cmd + Shift + M (Mac).
- Website mobile view mein switch ho jaayegi.
- Upar device dropdown se specific device choose karo: iPhone 14, Samsung Galaxy S20, Pixel 7, iPad Air, etc.
DevTools open nahi ho raha?
F12 shortcut kuch laptops pe Fn+F12 se kaam karta hai. Ya Chrome 3-dot menu > More Tools > Developer Tools. Mac pe: Cmd+Option+I.
Device Simulator — Features
Device Toolbar mein:
- Device selection: Popular phones aur tablets ki preset list — exact pixel dimensions aur DPR (device pixel ratio)
- Custom resolution: Width aur height manually type karo
- Zoom: 50% zoom se badi screen pe mobile comfortably dekho
- Rotate: Landscape/portrait toggle
- Touch simulation: Mouse clicks touch events ki tarah behave karte hain
- Network throttle: 3G/4G speed simulate karo page load test karne ke liye
User Agent Change Karna — Without DevTools
Sirf user agent change karna hai (bina full DevTools ke):
- Chrome address bar mein jaao.
- DevTools khuloo (F12) > 3-dot menu in DevTools > More Tools > Network Conditions.
- “User agent” section > “Select automatically” uncheck karo.
- Dropdown se mobile user agent choose karo (e.g., “Chrome — Android”).
Ya Chrome extension “User-Agent Switcher” se ek click mein mobile/desktop switch karo.
Responsive Design Testing
Developers ke liye website responsive hai check karna:
- DevTools > Device Toolbar > window resize karo custom breakpoints pe
- 320px width (small phone), 375px (iPhone SE), 390px (iPhone 14), 412px (Pixel), 768px (tablet)
- “Responsive” mode mein freely resize karo handles drag karke
Chrome mein Desktop Site Force Karna (Android)
Ulta scenario — Android Chrome pe desktop site dekhni ho:
- Chrome Android > 3-dot menu > “Desktop site” toggle on karo.
- Website desktop version mein load ho jaayegi.
- Per-site setting save hoti hai — woh site hamesha desktop mode mein khuleggi.
Safari pe Mobile View (Mac)
Mac Safari mein develop menu se:
- Safari > Preferences > Advanced > “Show Develop menu” on karo.
- Develop menu > “Enter Responsive Design Mode” (Cmd+Option+R).
- Device presets milenge — iPhone, iPad, different screen sizes.
Mobile website testing setup ke liye:
- ✅ Chrome DevTools shortcut F12 ya Ctrl+Shift+I yaad hai
- ✅ Device Toolbar shortcut Ctrl+Shift+M yaad hai
- ✅ Custom device add kiya hai DevTools mein (Edit > Add custom device)
- ✅ Network throttle 3G pe test kiya hai slow connection simulation ke liye
- ✅ Android Chrome pe Desktop site toggle jaanta/jaanti hoon
FAQs
DevTools ka mobile simulation 100% accurate hai?
Mostly accurate — screen size, touch events, user agent sab simulate hota hai. Lekin real device sensors (accelerometer, GPS), actual hardware performance, aur some CSS features exact replicate nahi hoti. Final testing actual device pe zaroor karo.
Kya mobile view mein changes save hoti hain?
DevTools mein ki gayi changes temporary hoti hain — page refresh pe wapas original ho jaata hai. Source files edit karne ke liye Workspace setup karna padega DevTools mein.
Chrome pe permanently mobile view mein browse kar sakte hain?
Extensions se: “User-Agent Switcher for Chrome” se globally mobile user agent set karo. Lekin yeh browsing experience degrade kar sakta hai kuch sites pe.
Chrome DevTools Official Guide ↗Aur Chrome Tips Padhein
Related guide: Chrome Incognito Mode aur Extensions Guide — Chrome ka pura power use karo.