Resize command on browser window so viewport width has specific dimensions

I do a lot of web development work and especially focus on responsive design. As such, I often pop my browser window out of the managed windows so it can float and be resized to correctly view the page for different screens. Due to this, I'm wanting to setup a shortcut with yabai and skhd that can automatically resize my windows so that the viewport dimensions are at a my desired height and width for desktop versus tablet versus mobile development.

As of now, I was thinking of using this yabai command
yabai -m window resize abs:<dx>:<dy>

This should work great to resize the window, however I'm unsure of how to determine the window size required to get the specific viewport dimensions that I want. I'm planning to setup a few different skhd keyboard shortcuts to achieve the following viewport dimensions:

Desktop: 1440x900
Desktop Large: 1920x1080
Desktop Medium: 1280x720
Desktop Small: 1024x576
Tablet Vertical: 768x1024
Tablet Small Vertical: 601x962
Tablet Horizontal: 1024x768
Phone: 425x896
Phone Small: 375x896

My goal is to map each of these to a different yabai/skhd command so I can quickly float my browser window and resize accordingly. Any help would be appreciate! Thank you!

Start with the documented yabai window resize abs:<dx>:<dy> command and the distinction between outer window size and browser viewport size; then check how skhd invokes it on macOS. Done would be a confirmed mapping from the listed viewport dimensions to usable yabai/skhd commands.