How can I type in a specific width for my browser? I am using Chrome and the chrome dev-tools
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.
google-chrome google-chrome-devtools
asked Jul 30 '14 at 16:32
WillWill
112117
add a comment |
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.
google-chrome google-chrome-devtools
asked Jul 30 '14 at 16:32
WillWill
112117
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
add a comment |
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.
google-chrome google-chrome-devtools
asked Jul 30 '14 at 16:32
WillWill
112117
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.
google-chrome google-chrome-devtools
google-chrome google-chrome-devtools
asked Jul 30 '14 at 16:32
WillWill
112117
asked Jul 30 '14 at 16:32
WillWill
112117
edited Jul 30 '14 at 17:37
Will
asked Jul 30 '14 at 16:32
WillWill
112117
asked Jul 30 '14 at 16:32
WillWill
112117
asked Jul 30 '14 at 16:32
WillWill
112117
112117
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
add a comment |
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
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
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
I edited my question because the explanation was too long.
– Will
Jul 30 '14 at 17:31
add a comment |
3 Answers
3
active
oldest
votes
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.
answered Jul 30 '14 at 17:55
ArjanArjan
26.9k1065107
add a comment |
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/
answered Jul 30 '14 at 17:42
MarceloMarcelo
78838
It's encouraged to give links!
– Will
Jul 30 '14 at 17:46
add a comment |
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.
answered Dec 12 '18 at 15:44
garrettlynchgarrettlynch
1061
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "3"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsuperuser.com%2fquestions%2f790262%2fhow-can-i-type-in-a-specific-width-for-my-browser-i-am-using-chrome-and-the-chr%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Jul 30 '14 at 17:55
ArjanArjan
26.9k1065107
add a comment |
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.
answered Jul 30 '14 at 17:55
ArjanArjan
26.9k1065107
add a comment |
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.
answered Jul 30 '14 at 17:55
ArjanArjan
26.9k1065107
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.
answered Jul 30 '14 at 17:55
ArjanArjan
26.9k1065107
answered Jul 30 '14 at 17:55
ArjanArjan
26.9k1065107
answered Jul 30 '14 at 17:55
ArjanArjan
26.9k1065107
answered Jul 30 '14 at 17:55
ArjanArjan
26.9k1065107
26.9k1065107
add a comment |
add a comment |
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/
answered Jul 30 '14 at 17:42
MarceloMarcelo
78838
It's encouraged to give links!
– Will
Jul 30 '14 at 17:46
add a comment |
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/
answered Jul 30 '14 at 17:42
MarceloMarcelo
78838
It's encouraged to give links!
– Will
Jul 30 '14 at 17:46
add a comment |
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/
answered Jul 30 '14 at 17:42
MarceloMarcelo
78838
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/
answered Jul 30 '14 at 17:42
MarceloMarcelo
78838
edited Jul 30 '14 at 17:48
answered Jul 30 '14 at 17:42
MarceloMarcelo
78838
answered Jul 30 '14 at 17:42
MarceloMarcelo
78838
answered Jul 30 '14 at 17:42
MarceloMarcelo
78838
78838
It's encouraged to give links!
– Will
Jul 30 '14 at 17:46
add a comment |
It's encouraged to give links!
– Will
Jul 30 '14 at 17:46
It's encouraged to give links!
– Will
Jul 30 '14 at 17:46
It's encouraged to give links!
– Will
Jul 30 '14 at 17:46
add a comment |
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.
answered Dec 12 '18 at 15:44
garrettlynchgarrettlynch
1061
add a comment |
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.
answered Dec 12 '18 at 15:44
garrettlynchgarrettlynch
1061
add a comment |
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.
answered Dec 12 '18 at 15:44
garrettlynchgarrettlynch
1061
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.
answered Dec 12 '18 at 15:44
garrettlynchgarrettlynch
1061
answered Dec 12 '18 at 15:44
garrettlynchgarrettlynch
1061
answered Dec 12 '18 at 15:44
garrettlynchgarrettlynch
1061
answered Dec 12 '18 at 15:44
garrettlynchgarrettlynch
1061
1061
add a comment |
add a comment |
Thanks for contributing an answer to Super User!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsuperuser.com%2fquestions%2f790262%2fhow-can-i-type-in-a-specific-width-for-my-browser-i-am-using-chrome-and-the-chr%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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