Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v4 Alpha 5, no breakpoint near docs specified ~ 480px, sm too large for iPhone 5 landscape #21219

Closed
AdmiralPotato opened this issue Nov 27, 2016 · 3 comments

Comments

@AdmiralPotato
Copy link

AdmiralPotato commented Nov 27, 2016

Part of this issue is a possibly a documentation discrepancy; reading through the V4 migration guide, there are three references to a measurement of ~ 480px, but in v4 Alpha 5, we jump from xs: 0 all the way to the current value of sm: 576px. This value is quite far from being able to target a number of phones in landscape mode, notably the iPhone 5, with a landscape viewport size of 568px - reference - which can no longer be reached with the default preset.

These are the places in the migration guide where I'm seeing the reference to ~ 480px:

  • Global Changes
  • Grid System
  • Grid System - this section title is listed a second time in the same page, but with different content. Is this intentional, or just overlooked after a reorganization?

Is there a reason that the sm breakpoint was moved up so high? Is there a motion to abandon the landscape breakpoint for smaller/older smartphones, or was this scooted up a a bit too far on accident?

@AdmiralPotato AdmiralPotato changed the title v4 Alpha 5, no breakpoint near docs specified ~ 480px, sm too large for iPhone 5 portrait v4 Alpha 5, no breakpoint near docs specified ~ 480px, sm too large for iPhone 5 landscape Nov 27, 2016
@holger1411
Copy link

Could it be a bug?
sm: 567px,
would make sense,
not
sm: 576px,

@AdmiralPotato
Copy link
Author

AdmiralPotato commented Nov 28, 2016

The problem is that sm: 567px doesn't make compatibility sense either though. There are so many devices (at a glance, looking like up to 20% - reference) with a landscape width between 480px and 560px, with a very popular size being 533px. It doesn't make any sense to me to exclude all of them just because a single popular device has a width of exactly 568px. I suppose that this is a question for @mdo for some history on this issue.

Somewhere between here: 0d27e12
and here: a90f6c7?diff=split#diff-d8ee409a461718bfb6240710c8c73382R84
something was lost in translation between rems and pixel viewport widths.

At one point, there was a motion to use rem to measure the viewport in media queries. This was a nice idea, but it turned out that media query rem values didn't scale with the font-size applied to the html tag. It seems that the value @media (max-width: 34rem) { ... } was chosen because 34rem * html{ font-size: 14px; } = 476px as a viewport width - 14px being Bootstrap 3's default font size.

The approach of using rem in media queries has since been abandoned, but it seems that a later decision for the pixel resolution of the sm breakpoint should be defined by was Bootstrap 4's 16px default font size. I even see where the 34rem * html{ font-size: 16px; } = 544px as a viewport width comes from, but the problem is that the browser was never able to make that multiplication. Many viewports are still between 476px and 533px.

Again, I would like to ask - Is there a reason that the sm breakpoint was moved up so high? Is there a motion to abandon the landscape breakpoint for smaller/older smartphones? Or was this simply lost in translation between px -> rem -> px? I would like to propose that the sm breakpoint be moved back to 476px to cover all of the use cases that it previously met - the landscape viewport that it used to target.

@mdo
Copy link
Member

mdo commented Nov 29, 2016

The current values are intentional, not specific to a particular device, not lost in any translation, and not likely to change again. The small breakpoint was never about specifically targeting the landscape orientation of any particular device. It's simply meant to be a reasonable width at which you might want to re-arrange content with another grid tier.

Regarding your mention of 476px as the old breakpoint, we never had that value for the sm breakpoint. We've been rocking a base font-size of 16px in v4 for the last two years of development.

Coupled with the first default tier, xs at 0px and above, you should have plenty of control for targeting smaller devices like phones, be it in portrait or landscape.

@mdo mdo closed this as completed in 339f8c3 Nov 29, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants