Device View Port Test Matrix

The following information below captures the operating systems, devices, and browsers that need to be considered in general for modern websites. The three major operating systems that need to be supported are defined below along with the versions of those OS’s and the browsers available for use on each platform.

Tailwind Breakpoints

https://tailwindcss.com/docs/responsive-design

Breakpoint prefix	Minimum width	CSS
sm	40rem (640px)	@media (width >= 40rem) { ... }
md	48rem (768px)	@media (width >= 48rem) { ... }
lg	64rem (1024px)	@media (width >= 64rem) { ... }
xl	80rem (1280px)	@media (width >= 80rem) { ... }
2xl	96rem (1536px)	@media (width >= 96rem) { ... }

Material UI Viewports

Default breakpoints

Each breakpoint (a key) matches with a fixed screen width (a value):

• xs, extra-small: 0px
• sm, small: 600px
• md, medium: 900px
• lg, large: 1200px
• xl, extra-large: 1536px

These values can be customized

Bootstrap Viewports

• XS max ( <576.98px )

• SM max ( <767.98px )

• MD min ( >=768px )

• LG min ( >=992px )

• XL min ( >=1200px )

• col for mobile phones (devices with resolutions < 576px);

• col-sm for larger mobile phones (devices with resolutions ≥ 576px);

• col-md for tablets (≥768px);

• col-lg for laptops (≥992px);

• col-xl for desktops (≥1200px)

Viewports

Viewport	Mode	WidthRange	HeightRange	PrimaryDevices
Mobile	Portrait			IPhone
Mobile	Landscape
Tablet	Portrait
Tablet	Landscape
Desktop	Landscape

Devices

Device	Mode	Width	Height