Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Responsive Web Design with DevTools' Device Mode

blog.chromium.org

Post reply on HN
Print view View original

31–36 of 36 posts

Re: Responsive Web Design with DevTools' Device Mode

#31

Post by paulirish »

at-fates-hands wrote: post #27
dkyc wrote: post #15

Been using this for a while now. One very annoying thing is the weird caching behaviour of the settings: If I switch into emulation mode on tab #1 and then open the dev tools in tab #2, the second tab will also emulate the same screen resolution. However, when I reset the emulation in tab #2, tab #1 will not be changed. Is there any sense in this behaviour?

My other beef with this is not being able to close the tools in order to see the bottom of the screen. This something you can do in Firefox Aurora. You can open the dev tools, hit the emulator tab, and the responsive window runs on its own you so can see the whole window. The one thing this does really well is the touch events. Firefox dev tools have it too, but it doesn't seem to work as well as on Chrome.

The "Fit" checkbox will scale the viewport you've set to fit within the available space. It's actually awesome to have regardless of you needing to emulate a device or not. And yeah, right-docked tools work great here. We've recently changed the default to that. :)

Re: Responsive Web Design with DevTools' Device Mode

#33

Post by likeclockwork »

paulirish wrote: post #21
shogun21 wrote: post #8

Firefox has had this feature for a long time...

Firefox is doing awesome work and had something similar in place a while ago. But there are some significant differences between these two. * devicePixelRatio emulation. If you have density-dependent assets (srcset/image-set()), it'll retrieve those. You can also pinch-zoom and it'll behave like it does on the device, it's easy to see that low dpi assets are not sharp. * viewport emulation. Whatever values you have i…

How do you pinch zoom with a mouse?

Re: Responsive Web Design with DevTools' Device Mode

#34

Post by paulirish »

likeclockwork wrote: post #33
paulirish wrote: post #21

Earlier quoted context omitted.

Firefox is doing awesome work and had something similar in place a while ago. But there are some significant differences between these two. * devicePixelRatio emulation. If you have density-dependent assets (srcset/image-set()), it'll retrieve those. You can also pinch-zoom and it'll behave like it does on the device, it's easy to see that low dpi assets are not sharp. * viewport emulation. Whatever values you have i…

How do you pinch zoom with a mouse?

Shift+drag. :) https://developer.chrome.com/devtools/docs/device-mode

Re: Responsive Web Design with DevTools' Device Mode

#36

Post by justinraczak »

wil421 wrote: post #10
rjv wrote: post #6

Earlier quoted context omitted.

I've found you'll never get a 100% accurate representation with these "emulators," but it's certainly a good starting point. You're better off using a service like BrowserStack for your in-depth testing.

Interesting I will have to look into BrowserStack. My employer likes me to develop for devices I dont physically have or are not able to test on due to restrictive corporate network policies.

Sauce Labs provides a tunneling app (Sauce Connect) for testing firewalled applications securely on mobile emulators with some real devices coming online shortly.
Post reply on HN