My “go-to” desktop browser for doing web development is the Chrome browser. However, it has one annoying problem for people like me who do responsive web development: It won’t resize down to 320 pixels wide, the width of an iPhone. With my Chrome browser on Windows, the minimum width is 500px. On Mac, the minimum is 400px. This makes it a pain to quickly check mobile layouts during development. You can’t make the Chrome browser window thin enough!
Firefox, on the other hand, will get as thin as I need it to! But, It’s inconvenient to have to use two different browsers during development.
Solution #1: Launch a Resizable Chrome Window
This works on Chrome for Mac and Windows. During development, I launch this once, and refresh it using the F5 key.
Solution #2: Chrome Dev Tools
Another solution is to use Chrome’s dev tools console and click the “mobile” icon in the upper left corner:
Click that icon and the corresponding Chrome window will show a shrunk down version of your site. It’s not dynamically resizable though, like the first solution is.
Was this useful to you? If so, please let me know in the comments below! – Brian