If the average / most popular screen size width is now more than 1366px, why is bootstrap widest container (from their CDN) at max-width:1170px?
.container {
max-width: 1170px;
}
Should I not believe everything I read?
This is from many sources by the way, not the first one I came across.
The underlying reason for the question is I want to design for max width desktop use - I'll worry about tablets and phones when desktop design is finalised.
According to screenresolution.org, the actual most popular resolution is 1366x768, not more.
For desktop display, Bootstrap use a 1170px width, with a padding of 15px on both left/right sides :
@media (min-width: 1200px)
.container {
width: 1170px;
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Quick calculation : (1366 - 1200) / 2 = 83.
The Bootstrap desktop layout keep (at least) a margin of 83px on both sides of your screen (98px if you count the padding). That's not that big, and it avoid the page to look congested. For a counter-example, Wikipedia use a 100% width layout, but many people think it's "too-much", it decrease readability.
You don't have to be worried about Bootstrap width. Of course you can change it.
Almost everything is set in percent in Bootstrap 3.
Have a look on Bootstrap customize & download page, you'll find a few variables useful :
@screen-xs-min: 480px@screen-sm-min: 768px@screen-md-min: 992px@screen-lg-min: 1200px@container-sm: ((720px + @grid-gutter-width))@container-md: ((940px + @grid-gutter-width))@container-lg: ((1140px + @grid-gutter-width))@grid-columns: 12@grid-gutter-width: 30px@grid-float-breakpoint: @screen-sm-min
The Galaxy S4, for example, actually runs at 1080p. Put it in portrait mode and you'd think it would run the full desktop site, which sounds terrible when comparing that 5.5" screen with my 24" LCD for example. It seems the phone manufacturers have put in a "fake" resolution to the browser, possibly with some sort of "zoom". I would test on an actual device, or at least an Android emulator, to see what the behavior is. I usually get the correct site even though it has a high resolution.
It could be because the Bootstrap devs recognize that many developers won't have content prepared to go that large, and it's trivial to change the width.
