Make Your Chrome Browser Window Narrow for Mobile Web Development

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

My solution is to launch a narrow adjustable Chrome browser window in JavaScript. I made a script that does just that.  Just paste in the full URL (including “https://”), and it will launch in a 320px wide browser 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:

Chrome dev tools showing mobile icon

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

13 thoughts on “Make Your Chrome Browser Window Narrow for Mobile Web Development”

    • The ‘mobile icon’ works a treat. I love toggling through the various models.
      It seems iPhones up to 5S, and Galaxy phones up to S4, seem to have 320px as their narrowest width.

      I feel that most of the custom @media divs I make in CSS are attributed to these ‘320’ screens.
      Fortunately the later models aren’t as narrow.

      Great thread and post, thanks :)

      Reply
  1. Now for your next trick, highlight in red any items that extend past the viewport and are responsible for the need to horizontally scroll.

    Reply
  2. Even easier, you can just move the developer console to the right (but it still has to be in the same window) and then you can shrink the screen as much as you want in Chrome, there’s no longer a 400 pixel minimum. Just click and hold the screens icon (to the left of the X) in the console top bar and then select the other option.

    Reply
  3. Very informative post in these days mobiles become the most important part of our lives. It makes our lives easy we can easily talk to any person all around the world. Mobile hardware characteristics are very different as compared to laptop and desktop computers. We can get a lot of online unique mobile sites that are a perfect fit for our businesses.

    Reply

Leave a Comment



This site uses Akismet to reduce spam. Learn how your comment data is processed.

Shares
Share This