3

I've included a very basic snippet, which includes a row of flex items that collapses a column when the viewport width is less than 768px. If you open the snippet full page and then open the dev tools you can resize the viewport and see this happens as expected.

However, if you set the viewport with to something like 780px and zoom in just a bit (shift + click and drag on Chrome) the row does not collapse into a column like it does when you resize the screen itself. Is it possible to alter the layout in response to user initiated zooming in a trivial way (i.e. HTML, CSS no JS)? I am aware of media queries responding to zoom if the zoom level is set in em, but that requires a page reload which is cumbersome and makes for pretty bad UX.

Here is a loom video showing what I mean.

.flex-responsive {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .flex-responsive {
    flex-direction: column;
  }
}
<div class='flex-responsive'>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
  <div>item</div>
</div>
Robbie Milejczak
  • 5,664
  • 3
  • 32
  • 65
  • `if you set the viewport with to something like 780px` are you talking about changing the media query here ? if yes then i can't reproduce the problem you're talking about – Rainbow Jun 18 '19 at 17:12
  • oops no I'm sorry, I'm talking about setting the simulated device width in dev tools – Robbie Milejczak Jun 18 '19 at 17:14
  • the issue you're talking about is `(shift + click and drag on Chrome)` to zoom, that feature doesn't trigger media queries because it's meant to enlarge portions of the page specially designated for people with low vision, imagine someone trying to zoom in on something then the media query kicks in and suddenly everything changed, talking about a bad UX – Rainbow Jun 18 '19 at 17:19
  • @ZohirSalak I'm not sure what you mean to say here, it's just a simulated pinch zoom. It doesn't work on a real mobile device either. I added a link to a short video showing what I'm describing – Robbie Milejczak Jun 18 '19 at 17:20
  • This answer (https://stackoverflow.com/a/22247258/3684265) simply says your best bet is to create media queries that can be used for multiple devices taking the zoom into consideration. – imvain2 Jun 18 '19 at 17:23
  • `(shift + click and drag on Chrome)` is the pinch zoom on mobile devices, you have no control over that even with JS – Rainbow Jun 18 '19 at 17:24
  • @ZohirSalak good thing I'm not trying to control the user's zoom then... – Robbie Milejczak Jun 18 '19 at 17:25
  • According to what you said, the column doesn't collapse when you zoom in with `(shift + click and drag on Chrome)` it's because the pinch zoom, the `viewport` isn't touched – Rainbow Jun 18 '19 at 17:28
  • even if that were true (and I don't think it is since zooming is enabled and configured via `meta name="viewport" content="...`) it's not particularly helpful, I'm not asking "why doesn't this work" I'm asking "is this thing possible" – Robbie Milejczak Jun 18 '19 at 17:50
  • It's Not­­­­­­­ – Rainbow Jun 18 '19 at 18:25
  • @RobbieMilejczak he has been saying that there is no way to interact with that kind of zoom in any way and if you could it would be bad ux. – ivan Jun 18 '19 at 18:26
  • @ZohirSalak do you have any reference for that knowledge or are you just insisting something is true when you don't actually know? Saying "It's Not" is even less helpful than what you've been doing – Robbie Milejczak Jun 18 '19 at 19:50
  • @ivan ? I'm not sure how that can be possible when there are a wealth of questions discussing how to **prevent** pinch zoom from altering layouts, there must be some way to leverage that behavior, and if there isn't then please point me to some reference – Robbie Milejczak Jun 18 '19 at 19:52

0 Answers0