HTML basics: What is currently a good viewport size?

Question

There many different opinions on this, but when designing a web page, what is the best window size, or viewport size that you should cater for? Now this is assuming you want to cater for the broad general public (meaning should you create a gaming website the people rolling there won't have 800x600 screens...)

Also, is it best to leave the main containing div at an auto size (so that it stretches with the screen size, assuming you do not have any fixed elements inside that you do not want stretching) or do you fix your width? I've designed a few websites, but I'm still not sure what is best practice in 2012.

Pixels are so last decade. Make it fluid! – Mr Lister Jul 16 '12 at 17:20 — Mr Lister, Jul 16 '12 at 17:20

imakeitpretty · Accepted Answer · 2012-07-16T18:32:13.100

Look up more on Responsive Web Design. Basic outline of it is: You should set up your css with media queries and adjust your styles to accomodate a variety of sizes. You should also design with a more fluid layout in mind using more % and less px.

I think these are pretty common media queries for responsive design:

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

Add this to the top of your html:

<meta name="viewport" content="width=device-width" />

If you want to have separate style sheets so that your user doesn't have to download one monster style sheets, do it like this:

`<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="/assets/css/small-device.css" />`

thanks a lot. Do you think the following tags are better suited? — DextrousDave, Jul 16 '12 at 20:01
actually, I believe you are right. That helps prevent zooming in problems I've heard about. — imakeitpretty, Jul 17 '12 at 02:15

score 2 · Answer 2 · answered Jul 16 '12 at 19:51

like imakeitpretty said... but don't worry about the currently popular device sizes... just resize until it is about to look ugly... and then make the break point... so it will look great on everything.

/* break point 01 ----------- */
@media only screen 
and (min-width : *size-it-gets-ugly*px) {
/* Styles */
}

/* break point 02 ----------- */
@media only screen 
and (min-width : *size-it-gets-ugly*px) {
/* Styles */
}

/* break point 03 ----------- */
@media only screen 
and (min-width : *size-it-gets-ugly*px) {
/* Styles */
}

score 1 · Answer 3 · answered Jul 16 '12 at 17:16

1

I would say 940px width + responsive using media queries min-width: 780px and 480px.

answered Jul 16 '12 at 17:16

dezman

18,087
10
53
91

score 1 · Answer 4 · edited May 23 '17 at 11:48

The best size is the size of the display that is viewing your site.
As j08691 pointed out responsive is the best practice in 2012. Responsive design while sounding like an empty buzzword is really useful. Your content is always the same size as the viewers browser.

Using media queries with fluid grids yields the best looking and most usable results. If you're not keen on writing your own, than have a look at an existing one like the Responsive Grid System.

score 0 · Answer 5 · edited May 23 '17 at 11:48

0

960px has been a solid standard width for a while.

The reasoning is put in this other SO question here.

Understanding your user is really important though, what you said about gamers is completely true.

I'm not familiar with responsive, but that looks promising as well

edited May 23 '17 at 11:48

Community

1
1

answered Jul 16 '12 at 17:44

J V

92
9

HTML basics: What is currently a good viewport size?

5 Answers5