0

I would like to type in a width value for the screen size so I can make proper break points. I often find myself trying to inch one pixel at a time from on size to another. This isn't always successful in Chrome, as I sometimes go by two pixels at a time. Is there a way to make the width a specific typed in width?

I am using Mac OS X. This question has to do with dev tools because I am asking how I can use it to set the browser window width using the keyboard. If I adjust the width between the dev screen and the page with my mouse, a number will appear giving the width and height of the window. This is useful when using breakpoints to create responsive websites. I would like to know how to do this with my keyboard so I don't have to use my mouse to get point by point precision.

  • Which OS is in question? What does setting the browser's Window to a certain width have to do with the google dev tools, or CSS? – Ƭᴇcʜιᴇ007 Jul 30 '14 at 17:22
  • I edited my question because the explanation was too long. – Will Jul 30 '14 at 17:31
2

In the Chrome Developer Tools, open Console, then select the tab Emulation. Here you'll find "Device" to select from a list of common devices (such as an iPhone; this will also change the user agent as sent to the server), and you'll find "Screen" to set the dimensions manually.

See also Mobile emulation in Chrome's help.

2

In Chrome there's a extension called "Web Developer Tools". That extension has a feature where you can make the browser resize to a specific HxW. You can even set up your own sizes.

(Not sure if I'm allowed to post links so I will refrain to do so).

Edit:

Thanks Will!

Here's the link to the author of the extension: http://chrispederick.com/work/web-developer/

  • It's encouraged to give links! – Will Jul 30 '14 at 17:46
0

There's also another extension called Window Resizer (https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh), which does the same as the one mentioned by @Marcelo. This might be useful to anyone on an older version of Chrome.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.