Responsive Nexus 7: portrait 603px and landscape width 966px

[OpenGrid]

I noticed that Nexus 7 fall into phone media group and it shouldn't. Is it too much clutter to add / change CSS media queries covering tablets to match also these new resolutions?

[danielcha]

I think this is a very general "issue" with frameworks like bootstrap that are responsive. A good practice is to approach building a responsive website is setting your breakpoints whenever your design breaks. However bootstrap does not know when your own custom design will break (i.e. 3 menu items vs 7), therefore they are using general breakpoints based on common device widths. The big downfall of this approach is the fact that new devices are coming out almost every day, and what is common today, might not be tomorrow.

I am also developing a responsive website using bootstrap. My approach was build my site, toss out bootstraps breakpoints and use my own whenever the design would break.

So in an attempt to answer your question: is it to much clutter to add or change the media queries? A good point to start would be:

https://github.com/twitter/bootstrap/blob/master/less/responsive.less

Or just edit the bootstrap-responsive.css file directly if you don't want to use LESS. Hope this helps :-)

[OpenGrid]

The point I wanted to make is that 768px can no longer be a breaking point for tablets.

In Bootstrap terms this is somehow important because documentation suggest to newcomers using classes like .visible-tablet etc. Since Nexus 7 or Kindle Fire width is: 603px and 600px - my suggestion was to lower 768px step to 600px.

Vanilla version of Bootstrap, below 768px starts to stack columns and this looks really bad on these tablets.

[archonic]

I mostly agree except that variations in pixel density and device orientation totally screws things up. Picking one fixed value and calling that "tablet size" will never accommodate all tablet devices. You could override the styles in your own .css, recompile .less files, or create your own version of bootstrap-responsive.css.

What I do instead is server-side detection of common devices with known odd resolutions (such as given retina device, nexus 7 or kindle fire) and change the scale value in the viewport meta tag accordingly.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Device detection is also a little screwy though. You may not be able to discern between different nexus devices for example.

[OpenGrid]

It doesn't change the fact that Bootstrap documentation is in "stacked columns mode" on Nexus 7 or Kindle Fire when it should still be in the same row without any loss to readability etc. This is still a big screen and stacked mobile design looks ridiculous on these devices. When you add iPad mini to the list this is no longer a case of some odd devices out there.

[chenghong]

Changing "tablet" width to 600 may overlap it with "landscape phone" sizes. Suggest to include orientation: portrait as well.

[mdo]

For the time being, we won't be changing anything here.

[jace]

Should this be reconsidered for Bootstrap 3? The Nexus 7 falls between phone and tablet depending on orientation. I've noticed the Nexus 7 reports 600px width in portrait mode, while my Nexus 4 reports 598px in landscape mode.

The current xs/sm/md/lg set of widths doesn't provide a way to distinguish between landscape and portrait orientation of phones, so perhaps a 'xxs' to target portrait phone widths? This will fix the Nexus 7 problem as well since it will match landscape phone widths and designers can specify 'xxs' and 'xs' classes separately.

[concuria]

Is this "issue" addressed in Bootstrap 3?

[jace]

@concuria It's not.

[archonic]

Discerning between orientations is not something a browser can do reliably across different devices and browsers. You can change the breakpoint in your less files or just download the configured css here:

http://getbootstrap.com/customize/#less-variables

Look for Media Query Breakpoints. This issue is a non-issue IMO.

[cvrebert]

We're considering adding more grid sizes in Bootstrap v4, but nothing's going to happen with this in v3.

[Jakobud]

Surprised this is still an issue with Bootstrap 3. The Google Nexus 7 is the #1 most sold Android tablet in the world... and it doesn't even fit in Bootstrap's "tablet" layout.

I know that you aren't supposed to modify responsive breakpoints around devices and instead you should modify them around your design. And to that I would say that the Bootstrap small layout design looks very awkward at such a wide resolution. About 480 is the max I would ever make a mobile layout for portrait and 640 for a mobile landscape layout.

And FYI, the 2012 Nexus 7 is 603px wide and the 2013 Nexus 7 is 600px wide (both CSS pixel ratio equivalents).

[archonic]

It's not really an "issue" when you're free to change the tablet breakpoint yourself. At this point, it would be a far greater issue to change the default breakpoint, potentially breaking (or at least negatively affecting) 10's of 1000's of sites out there that rely on the default.

[Jakobud]

I absolutely agree. I'm thinking more for v4. I think a solid solution could be to add portrait vs landscape differentiating to the smaller media queries so that phones in landscape get small layout but small tablets like Nexus 7 in portrait get the proper tablet layout.