Re: How to test for WCAG 2.1 SC 1.4.10 Reflow - Level AA?

As another way in Chrome to test this: in devtools, enable the device
toolbar and then edit the device list to add custom devices for the width
and height, each. Just make sure to change "Mobile" to "Desktop". This way
you can know that you've resized to the specific width without having to
guess. The documentation on how to Simulate Mobile Devices with Device Mode
in Chrome DevTools
<https://developers.google.com/web/tools/chrome-devtools/device-mode> focuses
on devices, but has these steps described in more detail.

Hope that helps!

-Shawn

On Mon, Feb 10, 2020 at 3:34 PM Patrick H. Lauke <redux@splintered.co.uk>
wrote:

> On 10/02/2020 19:32, Jonathan Avila wrote:
> > I also recommend docking the dev tools to the side when testing and
> resizing.  I believe Chrome will show you the values as you drag but
> Firefox requires a setting change in order for those values to be display.
> The setting is in Dev tools.
> >
> > My preference is to test at 320 CSS width and not start at 1280 width
> and zoom to 400% -- but I haven't proven examples where it could be
> different.
>
> It's exactly the same, only difference is that zooming to 400% from 1280
>   also changes the vertical dimension of the viewport while just
> dragging the devtools to make the page "thinner" changes just the width
> of the viewport in isolation, leading to an unnaturally "portraity"
> aspect ratio. Depending on how the media queries etc are set up, this
> MAY trigger/not trigger certain extra styles. If in doubt, also resize
> the whole browser window vertically.
>
> P
> --
> Patrick H. Lauke
>
> https://www.splintered.co.uk/ | https://github.com/patrickhlauke
> https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
>
>