Testing Responsive Design: Manually Dragging Browser Window vs Using Device Toolbar

Question

This is something that has been bothering me for a while, and I never really understood why this happens:

When I'm testing the responsiveness of websites I'm working on, sometimes I will click on "Toggle device toolbar" and select specific device sizes, and sometimes I will simply drag the browser window to make it larger or smaller.

However, the UI is not always consistent between the two methods, even though the width and height values of the viewport seem to be identical.

Below is an example of what I'm describing.

When I manually resize the window (by dragging), the page looks like this:

And when I toggle the device toolbar, the page looks like this:

As you can see in the images, the dimensions are the same, but the navbar on the right doesn't appear in the first image as it does in the second image (in fact, the navbar doesn't ever disappear when using the device toolbar).

Would anyone know why this is the case? This isn't a huge issue for me, but I believe it may be the cause of some of my Cypress e2e tests failing when I run them on the page.

In practice, it seems as though the "Toggle device toolbar" is the accurate representation of what the UI would actually look like, but when I run the Cypress tests, the snapshots look like the first image - when I resize the window by dragging. As a result, some of the buttons end up not being visible on the page, but they are visible when I actually open the page on any device (latop, tablet, mobile, etc.).

Would anyone happen to have any insight into this? I'm also just curious why this is happening.

Here is a link to the actual website in question: https://ddmal.music.mcgill.ca/Neon/editor.html?manifest=CF-005

Thank you!

score 3 · Accepted Answer · answered Jun 26 '23 at 02:03

The navigation panel is controlled by a CSS media query

@media screen and (max-width: 768px) {
  .is-hidden-mobile {
    display: none!important;
  }
}

This question Chrome Device Mode Emulation Media Queries Not Working discusses the problem, but it's a bit old so it's worth testing directly.

This is a simplified version of your web page

<html lang="en">
  <head>
    <meta charset="UTF-8">

    <!-- Comment out the following to see old behavior -->
    <meta name="viewport" content="width=device-width">

    <style>
      #editor-body-container {
        overflow: hidden;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: nowrap;
      }
      #right-column {
        height: 100%;
        width: 30%;
      }
      @media screen and (max-width: 768px) {
        .is-hidden-mobile {
          display: none!important;
        }
    </style>
  </head>

  <body>
    <div id="editor-body-container">
      <div id="left-column"><h1>Left column</h1></div>
      <div class="is-hidden-mobile" id="right-column"><h1>Right column</h1></div>
    </div>
  </body>
</html>

If you add / remove the <meta name="viewport" content="width=device-width"> given in above answer, the problem is corrected (you may have to toggle the device mode)

Thank you! I did not know about this meta tag! For those curious about what the viewport meta tag actually does (as I was) and why you should use it, here's a great MDN article about why it's important to include it if you plan on optimizing your websites for all devices: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag — Dave Peters, Jun 26 '23 at 15:49

Testing Responsive Design: Manually Dragging Browser Window vs Using Device Toolbar

1 Answers1